Как сделать свою иконку font awesome
Добавил пользователь Евгений Кузнецов Обновлено: 04.10.2024
Конечно, практически все, кто причастен к веб-разработке, слышали про Font Awesome. Кроме того, многие из нас ежедневно используют эту библиотеку шрифтов в своих проектах.
Если, вдруг, Вы не знаете о чем идет речь, Font Awesome - потрясающая библиотека иконок для веб-приложений и сайтов, которая содержит тысячи элементов, предназначенных для совершенно различных целей.
Иконки созданы в SVG, но нет причины беспокоиться, в данном случае Вам не нужны какие-либо знания о работе с SVG.
Содержание
Начало
Для размещения иконок Font Awesome использует следующий код:
В результате мы получим милую маленьку звездочку:
Стили
Для иконок Font Awesome существует четыре стиля:
При этом иконки solid практически все бесплатные. Остальные - доступны только в pro-версии.
Как это работает?
Объявление CSS-классов для тега i происходит следующим образом:
Сначала идет класс, определяющий выбранный стиль:
Затем следует класс самой иконки:
- который всегда начинается с префикса fa-
- и заканчивается именем иконки.
Итак, основы использования Font Awesome оказались достаточно просты. Переходим к некоторым полезным приемам.
Приемы
Как изменить размер иконки?
Именно так, Font Awesome позволяет нам изменять размер иконки, не вмешиваясь в CSS-код, достаточно выбрать соответствующий класс для элемента:
Так будет выглядеть иконка в размере xs:
так - в размере 5x:
а так - в размере 10x:
Это просто, не правда ли?
Как сделать иконку маркером списка?
Для этого нужно:
-
Добавить класс fa-ul для тега списка ul ,
Обернуть код выбранной иконки в тег span с классом fa-li и поместить в начале каждого элемента списка li .
А вот и результат:
- Иконки Font Awesome
- могут
- заменить маркеры HTML-списка
- не меняя CSS
Вращение иконки
Иконку можно поворачивать вокруг собственной оси, и для этого не нужно CSS-свойство transform. Достаточно добавить соответствующий класс:
Вот что означают эти классы:
- fa-rotate-90 поворот на 90 o по часовой стрелке,
- fa-rotate-180 поворот на 180 o по часовой стрелке,
- fa-rotate-270 поворот на 270 o по часовой стрелке,
- fa-flip-horizontal отражение по горизонтали,
- fa-flip-vertical отражение по вертикали,
- fa-flip-both отражение по горизонтали и вертикали (только для версий 5.7.0 и выше).
Так выглядит иконка в стандартном положении:
так при повороте на 180 o :
а так отраженная по вертикали:
Как анимировать иконки?
Классы fa-spin и fa-pulse добавят немного динамики выбранным иконкам:
Вот пример с классом fa-spin:
а это вариант с fa-pulse:
Как объединить иконки?
Для этого нужно обернуть объединяемые иконки в родительский элемент с классом fa-stack:
Внимание! Для всех приведенных ниже приемов нужна SVG версия Font Awesome
Как масштабировать иконку относительно контейнера (power transforming)?
Масштабировать иконку не изменяя контейнер можно с помощью атрибута data-fa-transform :
Вот что получится при уменьшении shrink-8:
Вот что получится при увеличении grow-6:
Как позиционировать иконку?
Для позиционирования иконки без модификации контейнера с помощью атрибута data-fa-transform используйте свойства:
Результат подобен абсолютному позиционированию в CSS.
Так будет выглядеть смещение иконки вверх относительно контейнера:
а так - смещение влево:
Как создать маску для иконки?
Это еще одна функция, позволяющая объединять две иконки в одну, но теперь с помощью атрибута data-fa-mask, в который мы помещаем классы фоновой иконки:
Таким образом, мы объединили
Как добавить текст к иконке?
Да, поверх иконки можно что-то написать.
Для этого нужно:
- создать обертку span с классом fa-layers,
- внутри обертки добавить иконку i ,
- после которой должен следовать элемент span с классом fa-layers-text, содержащий текст.
А вот и результат:
Как к иконке добавить счетчик?
Для того чтобы добавить счетчик, последовательность действий почти такая же, как и при добавлении текста поверх иконки.
- создать обертку span с классом fa-layers,
- внутри обертки добавить иконку i ,
- после которой должен следовать элемент span с классом fa-layers-counter.
По умолчанию счетчик находится в правом верхнем углу, но его положение можно изменить с помощью соответствующих классов:
- fa-layers-bottom-left внизу слева,
- fa-layers-bottom-right внизу справа,
- fa-layers-top-left вверху слева,
- fa-layers-top-right вверху справа (значение по умолчанию).
Спасибо за внимание.
С уверенностью этот материал можно отнести к разделу "Инструменты для сайта" смотрите в верхней панели сайта, возможно найдете еще, что-нибудь интересное для себя.
Что такое font awesome - это вспомогательный инструмент (иконка), который помогает выделить определенные элементы на сайте или блоге.
Думаю вы заметили, что есть некое несовпадение согласно переводу, поскольку шрифт и иконка это разные вещи. Но стоит заметить, что настраиваются эти иконки в шаблонах сайтов так же, как и шрифт используя те же параметры отсюда и название "font".
Что же можно выделить с помощью иконок font awesome? Допустим на моем сайте есть главное меню, которое разбито на несколько категорий: WordPress, Joomla, Blogger и т.д.. Так вот, для более презентабельного вида можно каждой из этих ячеек задать соответствующею иконку.
Правда в базе Font Awesome на все случаи жизни иконок не найдется, но это пока что, ведь с каждым месяцем их количество заметно прибавляется.
Так же можно выделять некоторые заголовки или подзаголовки в постах:
Очень полезны для такого типа сайта, как Landing Page. Сейчас просто невозможно представить презентацию одностраничника без данного инструмента.
В общем, как вы уже поняли иконкой можно отметить любой элемент сайта. Стоит упомянуть, что тх отображение достигается за счет использования языка CSS, что есть очень хорошо поскольку CSS код является самым легким для загрузки сайта. По крайней мере создатель инструмента хорошо постарался, чтобы не создавать дополнительной нагрузки на сайт.
Как подключить иконки Font Awesome к сайту, блогу
Вот мы с вами и добрались к самой важной части. Подключить шрифты проще простого, для этого вам нужно открыть HTML редактор своего сайта и в промежутке между тегами . вставить тег, который подключит ваш сайт к базе font awesome:
На днях сервис обновился и предоставил не только новый дизайн сайта, но и новую версию шрифтов с иконками. Чтобы подключить новую версию добавьте следующий код:
Как добавить к нужному элементу
Теперь дело осталось за малым, вам нужно выбрать нужную иконку на сайте Font Awesome скопировать ее HTML код:
и вставить его перед тем элементом, который хотите выделить.
Еще можно вставить иконку возле нужного элемента при помощи CSS, но это чуть сложнее. Каждая иконка имеет свой собственный Unicode, который и используется в данном случае.
Как изменить цвет иконки Font Awesome
Цвет иконки можно изменить двумя способами. Первый задать стили в HTML, второй способ задав необходимые стили в CSS.
Разница заключается в том, что при редактировании HTML цвет применяется иконке единожды, а если использовать CSS, тогда всем иконкам этого класса например class='fa fa-home' будет присвоен один и тот же цвет.
Чтобы узнать, как изменить цвет иконки посмотрите видео инструкцию:
Иконки выводятся через псевдокласс ::before , поэтому к любому элементу достаточно добавить класс с именем иконки. Обычно применяется элемент , но можно использовать и любой другой строчный элемент, например: , и др.
Для указывается два основных класса — fa и fa-icon , где вместо icon пишется имя иконки. Все имена доступны на этой странице.
Иконки разбиты по категориям, также есть поиск по ключевым словам (рис. 1).
Рис. 1. Иконки для видеоплеера
Чтобы добавить иконку с именем play напишем следующий код:
Сам элемент пустой и вставляется в то место на странице, где требуется вывод иконки. Размер её совпадает с размером текущего текста.
Размеры иконок
Размер любой иконки из набора мы можем изменить с помощью свойства font-size , переопределив его в своём стиле. Также Font Awesome предлагает пять готовых размеров. Достаточно добавить дополнительный класс к элементу как показано в примере 1.
Пример 1. Размер иконок
Результат данного примера показан на рис. 2.
Рис. 2. Размеры иконок
Цвета
Поскольку иконка это текстовый символ, то к нему применимы стилевые свойства color , background , text-shadow и другие, задающие оформление текста. В примере 2 показаны некоторые варианты изменения вида иконок.
Пример 2. Оформление иконок через стили
Результат данного примера показан на рис. 3.
Рис. 3. Цветные иконки
Font Awesome вводит специальный класс fa-inverse , изменяющий цвет иконок на белый, поэтому в стилях для иконки книжки цвет не указывается.
Поворот иконок
Иконки можно поворачивать на 90, 180 или 270 градусов по часовой стрелке, а также отражать их по горизонтали или вертикали. Для этого применяются следующие классы:
- fa-rotate-90 — поворот на 90º по часовой стрелке;
- fa-rotate-180 — поворот на 180º;
- fa-rotate-270 — поворот на 270º;
- fa-flip-horizontal — отражение по горизонтали;
- fa-flip-vertical — отражение по вертикали.
Надо учитывать, что не все иконки имеет смысл поворачивать и отражать, результат будет заметен для несимметричных иконок (пример 3).
Пример 3. Поворот и отражение иконок
Результат данного примера показан на рис. 4. Первая иконка самолёта выводится в исходном виде, вторая поворачивается на 90º, а третья отражается по горизонтали.
Рис. 4. Преобразования иконки
Анимация
Анимация обычно применяется для создания эффекта ожидания. Иконки можно заставить бесконечно вращаться по часовой стрелке двумя способами. Класс fa-spin производит плавное вращение, а fa-pulse — пошаговое вращение. Ниже показано вращение футбольного мяча.
Объединение иконок
Кроме обычного вывода иконки можно комбинировать между собой. Для этого создаём элемент
с классом fa-stack , а в него уже вставляем желаемые иконки. Вначале идёт нижняя, затем верхняя. К самим иконкам добавляется класс fa-stack-1x или fa-stack-2x , в зависимости от того, какая иконка должна быть больше размером. Ниже показана основная структура кода.
Для отдельных иконок мы можем задавать собственный стиль, например, цвет иконки. Тем самым получить новые цветовые решения (пример 4).
Хотите сделать ваш сайт ещё более привлекательным? Шрифтовые иконки помогут украсить ваши записи, страницы или меню. И когда речь идёт о шрифтовых иконках, то нельзя не вспомнить Font Awesome.
Если вы хотите добавить большую коллекцию иконок Font Awesome на ваш сайт WordPress, то читайте о двух быстрых и простых способах, как добавить их на WordPress.
Что такое Font Awesome Icons и чем они полезны?
Если вы используете тему Divi, то наверняка знакомы с шрифтовыми иконками от Elegant Icon Font, которые есть в комплекте с темой.
Font Awesome работает по такому же принципу – это шрифт, созданный из иконок. Не набором картинок. Почему это уточнение важно? Потому, что любые шрифтовые иконки, как Font Awesome и Elegant Icon Font — это:
- Векторные иконки – это значит, что они хорошо выглядят вне зависимости от размера отображения.
- Настраиваемые шрифты – вы можете управлять ими, как любыми другими шрифтами. Меняйте цвета, добавляйте анимацию и многое другое!
- Совместимы с любым браузером – шрифтовые иконки должны отлично работать с любым браузером.
На данный момент Font Awesome предлагает 675 различных иконок, которые вы можете добавить в любом месте на вашем сайте WordPress. Он также совместим с любой темой WordPress.
1. Как добавить Font Awesome на WordPress вручную
Добавить Font Awesome на WordPress вручную легко, но если вы не хотите разбираться с кодом, то сразу перейдите к следующей части.
Для внедрения Font Awesome вручную нужно выполнить два шага. Во-первых, вам нужно добавить таблицу стилей Font Awesome в хэдер вашей темы. А потом, нужно найти название иконки, которую вы хотите добавить, и вставить её с помощью короткого сниппета кода.
Добавление Font Awesome в хэдер темы
Первым шагом является добавление таблицы стилей Font Awesome в хэдер темы:
Этот код перенесёт таблицу стилей в Font Awesome из Bootstrap CDN. Вы также можете загрузить таблицу стилей прямо из Font Awesome . Нет никакой разницы.
Но мы не рекомендуем вставлять этот код прямиком в файл вашей темы header.php . Если ваша тема разрешает добавление кастомных скриптов в header.php из меню настроек, то лучше воспользоваться этим вариантом:
Но если ваша тема не позволяет такого сделать, то нужно добавить этот скрипт самостоятельно правильным образом (с точки зрения WordPress), а именно, использовать следующий код и вставить его в functions.php вашей темы (еще лучше, если это будет functions.php дочерней темы):
Вставляем иконки Font Awesome
Когда вы добавите код в вашу тему, вы будете готовы начать использовать иконки Font Awesome везде.
Найти полный список иконок можно на веб-сайте Font Awesome .
После выбора понравившейся иконки вы можете увидеть экран с разными размерами этой иконки. В центре экрана вы должны заметить небольшой блок кода:
Вам нужно скопировать весь код выбранной иконки. Потом, вы можете вставить этот код куда угодно в WordPress, неважно, какой редактор вы для этого используете. Просто убедитесь, что вы вставляете его, когда редактор переключен в режим "Текст":
Вы можете вернуться к визуальной вкладке после окончания внедрения кода. После публикации записи вы увидите свою иконку во фронтенде:
Как увеличить размер иконки Font Awesome
Например, вот изначальный код иконки:
А вот код с увеличенной в 2 раза иконкой:
В реальной жизни иконка будет выглядеть теперь так:
Вот список кусочков кода, которые вам нужно добавить, чтобы изменить размер:
- fa-lg – увеличить на 33%
- fa-2x – увеличить в 2 раза
- fa-3x – увеличить в 3 раза
- fa-4x – …
- fa-5x – … ну вы поняли!
Вы можете также делать другие крутые штуки, например, использовать иконку Font Awesome как пункт в маркированном писке, добавлять анимацию и многое другое. На официальном сайте Font Awesome вы можете найти инструкцию , как можно менять шрифтовые иконки.
2. Как добавить Font Awesome на WordPress с помощью плагина
Если вам не нравится предыдущий способ, то вы можете установить плагин. Существует множество различных плагинов, где доступна эта функция, но одним из самых популярных является Better Font Awesome :
Вы можете попробовать использовать и другие плагины, но нам кажется, что этот наилучший по нескольким причинам:
- Он регулярно обновляется. Это важно, поскольку несколько популярных плагинов Font Awesome не обновлялись годами.
- Автоматически импортирует новый набор иконок Font Awesome.
- Позволяет вам добавлять иконки через шорткод или тот же код, что мы использовали.
Для начала установите и активируйте плагин.
Он добавит новый раздел меню Настройки → Better Font Awesome в вашей консоли. Вам не нужно настраивать ничего, просто следуйте инструкциям, которые предоставит плагин:
Добавление иконок
Формат шорткода, который вам нужен:
Где NAME – это название иконки на веб-сайте Font Awesome:
Вы можете добавить этот шорткод в модуль Divi или в обычный текстовый редактор WordPress. Вот пример, где мы добавили иконку через шорткод в текстовый модуль во время использования Divi Visual Builder:
Visual Builder отображает это так:
Вы можете использовать тот же шорткод в обычном редакторе WordPress.
Если вы хотите изменить размер вашей иконки с помощью шорткода, то просто добавьте тэг класса с размером иконки:
Итоги
Вот и всё! Два разных способа добавить векторные иконки Font Awesome на ваш сайт WordPress. Мы предпочитаем ручной метод, поскольку он отнимает меньше времени и потом не нужно волноваться о потенциальной поломке плагина.
Но если вы не хотите трогать код темы, то лучше используйте плагин Better Font Awesome .
Читайте также: