Иконки Font Awesome — Обучение WordPress — Библиотека U of I
Когда использовать
Font Awesome — это коммерческая служба значков, которая позволяет нам использовать масштабируемые векторные значки на наших страницах. По сути, это означает, что мы можем добавлять значки на наши страницы, и они будут хорошо смотреться любого размера и на любом устройстве. Эти значки могут улучшить взаимодействие с пользователем и визуальную привлекательность вашего сайта.
Коллекция Font Awesome включает множество типов иконок. Вы можете попробовать:
- Формы/артефакты: книга
- UX-элементов: внешняя ссылка
- Логотипы: Facebook
Мы используем значок книги в наших примерах ниже.
Основное использование:
[fa type=»solid» icon=»book»]
- Найдите имя значка в базе данных Font Awesome, перейдя по адресу: http://fontawesome.com/v6. 0/значки/
- Найдите и щелкните нужный значок. Там вы увидите, что над ним находится название выбранного значка, например:
адресная книга - Выберите тип значка, который вы хотите использовать.
- Добавьте сокращенный код в формулу короткого кода: [fa type=»solid» icon=»address-book»]
Опции типа
- Сплошной: [fa type=»solid» icon=»адресная книга» ]
- Обычный: [fa type=»regular» icon=»адресная книга» ]
- Свет: [fa type=»light» icon=»адресная книга»]
- Duotone: [fa type=»duotone» icon=»адресная книга» ]
- Тонкий: [fa type=»тонкий» icon=»адресная книга»]
- Бренды: [fa type=»brands» icon=»tiktok» ]
Необязательные атрибуты: цвет, размер, стопка
По умолчанию ваш значок наследует стиль текста соседнего текста. Часто вам нужно, чтобы значки выделялись. К счастью, гуру веб-команды добавили некоторые из этих функций в шорткод в качестве необязательных атрибутов.
Color
Атрибут color изменяет цвет значка. Сейчас мы поддерживаем три цвета. Вот примеры для книги:
- Синяя книга: [fa type=»solid» icon=»book» color=»blue»]
- Зеленая книга: [fa type=»solid» icon=»book» color=»green»]
- Оранжевая книга: [fa type=»solid» icon=»book» color=»orange»]
Пример использования: значки социальных сетей на боковой панели IAS
Размер
Атрибут size изменяет размер значка.
Мы поддерживаем размер по умолчанию и еще 9, используя атрибут размера от 2 до 10.
- По умолчанию [fa type=»solid» icon=»book»]
- Размер 2: [fa type=»solid» icon=»book» size=»2″]
- Размер 3: [fa type=»solid» icon=»book» size=»3″]
- Размер 4: [fa type=»solid» icon=»book» size=»4″]
Пример использования: значки социальных сетей на боковой панели IAS
Стопка
Атрибут стек позволяет еще больше улучшить значок, расположив его по центру в круге или квадрате. Это можно комбинировать с атрибутами color и size для получения большого эффекта.
- Книга по кругу: [fa type=»solid» icon=»book» stacked=»circle»]
- Книга в квадрате: [fa type=»solid» icon=»book» stacked=»square»]
- Большая книга в зеленом квадрате: [fa type=»solid» icon=»book» stacked=»square» size=»2″ color=»green»]
Пример использования: домашняя страница FYI
Использование значков Font Awesome в ссылках
Разработчики обычно используют значки Font Awesome для обозначения назначения гиперссылок.