Я использую шрифт awesome в каком-то проекте, но у меня есть кое-что, что я хочу сделать со шрифтами awesome icons, я могу легко назвать значок следующим образом:
<i class="fa fa-lock"></i>
Возможно ли, чтобы все иконки всегда были в круглом круге с рамкой? Как то так у меня есть картинка:
С помощью
i {
background-color: white;
border-radius: 50%;
border: 1x solid grey;
padding: 10px;
}
Будет ли эффект, но проблема в том, что значки всегда больше, чем текст или элемент рядом, какие-либо решения?
css
font-awesome
Schneider
источник
источник
border-radius
Должен обогнуть элемент. Какой браузер вы используете? будет обновлять мой ответ с префиксамиi
имеет содержание. Обычно с FA у вас нет содержимого внутри i-тега, но иконка визуализируется CSS позже:<i class="fa fa-lock"></i>
и это именно то, о чем действительно просил @Schneider.С Font Awesome вы можете легко использовать сложенные значки, как это:
см. Font Awesome Stacked Icons
Обновление: - скрипка для сложенных иконок
источник
<span class="fa-stack fa-lg"> <i class="fa fa-circle-thin fa-stack-2x"></i> <i class="fa fa-stack-1x">1</i> </span>
Для этого не нужны трюки css или html. Font Awesome встроил для этого класс - fa-circle. Чтобы сложить несколько значков вместе, вы можете использовать класс fa-stack в родительском div.
// И теперь у нас есть иконка facebook внутри круга :)
источник
Значок шрифта в круге, используемый
em
в качестве базового измеренияесли вы используете ems для измерений, в том числе
line-height
,font-size
иborder-radius
,text-align: center
что делает вещи довольно прочными:источник
Обновление: лучше использовать flex.
Если вам нужна точность, это то, что вам нужно.
Скрипки. Играй -> http://jsfiddle.net/atilkan/zxjcrhga/
Вот HTML
Вот CSS
Радоваться, веселиться
источник
Вы тоже можете это сделать. Я хотел добавить кружок вокруг своих иконок icomoon. Вот код
источник
ОБНОВЛЕНИЕ :
Изучив недавно flex, есть более чистый способ (без таблиц и меньше css). Установите оболочку как
display: flex;
и для центрирования ее дочерних элементов, присвойте ей свойстваalign-items: center;
(вертикальное) иjustify-content: center;
(горизонтальное) центрирование.См. Обновленную скрипку JS.
Странно, что этого раньше никто не предлагал .. Я всегда использую для этого таблицы.
Просто сделайте обертку
display: table
и поместите материал по центру внутри нееtext-align: center
для горизонтального иvertical-align: middle
вертикального выравнивания.и какая-то дерзость вроде этого
или посмотрите этот JS Fiddle
источник
Это подход, который вам не нужно использовать
padding
, просто установитеheight
иwidth
дляa
и позвольтеflex
ручкеmargin: 0 auto
.источник
Пример ниже не совсем сработал для меня, это версия, которую я заставил работать!
HTML:
CSS:
источник
попробуй это
HTML:
CSS:
источник
Иконки Font Awesome вставляются как: до. Поэтому вы можете стилизовать свой i или что- то подобное:
источник
Вы можете просто получить круглый значок с помощью этого кода:
Теперь ваш CSS будет:
источник
Мне нравится ответ Дэйва Эверитта с «высотой строки», но он работает только путем указания «высоты», а затем мы должны добавить «! Important» к высоте строки ...
источник
!important
- это пластырь, а не решение. Это означает, что у вас есть другое свойство CSS где-то еще, переопределяющее ваше свойство.Это лучшее и самое точное решение, которое я нашел на данный момент.
CSS:
источник