Как использовать иконку 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 в зависимости от типа значка, который вы хотите отобразить.
Использование значков Font Awesome на вашем веб-сайте
Добавление значков к содержимому вашего сайта обеспечивает визуальную точку фокусировки, которая ориентирует пользователя на определенный раздел и сопутствующий контент.
Использование значков в веб-дизайне — это проверенный метод модернизации веб-сайта и облегчения потока пользователей. Добавление значков к содержимому вашего сайта помогает пользователю лучше обрабатывать информацию, которую вы пытаетесь передать, и обеспечивает визуальную точку фокусировки, которая заставляет пользователя перейти к определенному разделу.
Графические значки можно использовать любым способом, чтобы оживить ваш проект веб-дизайна. Вы можете использовать их как визуальное сопровождение к текстовым областям или как отдельные ссылки в ситуациях, когда места мало, а текстовые блоки невозможны в рамках дизайна. Именно эта универсальность иконок делает их такими полезными и широко распространенными.
К счастью, нет необходимости создавать собственный набор иконок. Font Awesome предоставляет универсальную структуру, которая включает в себя практически любую графику значков, которую вы можете себе представить, а также необходимые возможности масштабирования и настройки. Font Awesome почти наверняка сэкономит вам время и деньги при использовании определенных иконок. В следующей статье будет рассмотрено использование значков Font Awesome для оптимизации вашего проекта веб-дизайна.
Шаг 1. Добавьте необходимые элементы на свою веб-страницу.
Для начала вам необходимо убедиться, что на ваш сайт включены следующие ресурсы Font Awesome. Никаких загрузок или сложных скриптов не требуется — достаточно одной ссылки на Font Awesome CSS, чтобы начать работу.
Шаг 2. Добавьте выбранный значок
Font Awesome включает в себя сотни используемых значков, охватывающих широкий спектр тем и контента.
Для целей этого урока мы добавим значок RSS 9.0071 . Просто включите следующий код на свою страницу везде, где вы хотите, чтобы значок отображался. <я>
Каждый значок использует тег и требует двух классов. Первый, «fa», идентифицирует элемент как значок Font Awesome, а второй, «fa-rss», определяет конкретный значок для загрузки. Чтобы использовать разные значки, просто найдите соответствующий класс CSS.
Шаг 3. Использование встроенных настроек
Font Awesome имеет ряд встроенных способов настройки значка, таких как увеличение его размера, обеспечение фиксированной ширины значка или добавление анимации к выбранному классу значков. Приведенный ниже код отображает значок «Поддержка» в нескольких размерах.
<я> <я> <я> <я> <я> <я>
Шаг 4. Добавьте любые уникальные настройки
Поскольку эти значки полностью основаны на CSS, вы можете добавить свои собственные стили и классы, чтобы значок полностью работал в вашем проекте веб-дизайна.