Как использовать иконку Font Awesome в качестве контента в CSS
Сегодня иконочные шрифты довольно распространены, и все больше и больше разработчиков используют их преимущества в своих проектах. Иконочные шрифты — это простые шрифты, содержащие символы и глифы вместо букв или цифр. Их можно стилизовать с помощью CSS так же, как и обычный текст.
В этом фрагменте мы покажем, как можно использовать значок Font Awesome в качестве контента.
- Поместите элемент внутрь.
<голова>
Название документа
<тело>
Вот ссылка
Попробуй сам »
- Установите свойства font-family и font-size для элемента.
- Установите свойства text-decoration и color для элемента .
- Добавьте псевдоэлемент :before для размещения шрифта.
- Установите для семейства шрифтов значение «Font Awesome 5 Free».
- Укажите значение («\f00c») свойства содержимого.
- Установите толщину шрифта на «900».
корпус {
семейство шрифтов: Arial;
размер шрифта: 15px;
}
а {
текстовое оформление: нет;
цвет: #000000;
}
а: до {
семейство шрифтов: "Шрифт Awesome 5 Free";
содержимое: "\f00c";
отображение: встроенный блок;
отступ справа: 3px;
вертикальное выравнивание: посередине;
вес шрифта: 900;
} Вот результат нашего кода.
Пример добавления значка шрифта awesome в качестве контента:
<голова>
Название документа
<стиль>
тело {
семейство шрифтов: Arial;
размер шрифта: 15px;
}
а {
текстовое оформление: нет;
цвет: #000000;
}
а: до {
семейство шрифтов: "Шрифт Awesome 5 Free";
содержимое: "\f00c";
отображение: встроенный блок;
отступ справа: 3px;
вертикальное выравнивание: посередине;
вес шрифта: 900;
}
<тело>
Вот ссылка
Попробуй сам »
В приведенном выше примере мы заменили значение содержимого соответствующим номером Unicode.
Обратите внимание, что существуют общие свойства CSS, применимые ко всем значкам.
Давайте посмотрим еще один пример, где мы использовали две иконки внутри тега
Пример добавления значков шрифта awesome в качестве контента в неупорядоченный список:
<голова>
Название документа
<стиль>
уль ли {
тип стиля списка: нет;
отображение: встроенный блок;
поле справа: 20px;
}
.icon:: перед {
отображение: встроенный блок;
стиль шрифта: обычный;
вариант шрифта: нормальный;
рендеринг текста: авто;
-webkit-font-smoothing: сглаживание;
}
.facebook::до {
семейство шрифтов: "Font Awesome 5 Brands";
вес шрифта: 900;
содержимое: "\f082";
}
.twitter:: перед {
семейство шрифтов: "Font Awesome 5 Brands";
содержимое: "\f099";
}
<тело>
<ул>
Попробуй сам »
Измените семейство шрифтов на Font Awesome 5 Free или Font Awesome 5 Brands в зависимости от типа значка, который вы хотите отобразить.
Значение содержимого CSS FontAwesome · GitHub
Значение содержимого CSS FontAwesome
Этот файл содержит двунаправленный текст Unicode, который может быть интерпретирован или скомпилирован не так, как показано ниже. Для просмотра откройте файл в редакторе, который показывает скрытые символы Unicode. Узнайте больше о двунаправленных символах Unicode
Показать скрытые символы
| Font Awesome — это веб-шрифт, содержащий все значки из фреймворка Twitter Bootstrap, а теперь и многие другие. Хотя реализация в Bootstrap предназначена для использования с элементом (Bootstrap v2), вы можете захотеть использовать эти значки в других элементах. | |
Для этого вам нужно использовать следующий CSS для нужного элемента, а затем подставить значение содержимого для соответствующего значка. | |
| ************************************************* | |
| .элемент { | |
| должность: относительная; | |
| } | |
| /*замените значение содержимого на | |
| соответствующее значение из списка ниже*/ | |
| http://astronautweb.co/snippet/font-awesome | |
. |