Как использовать иконки Font Awesome на вашем сайте WordPress

Хотели бы сделать веб-сайт ещё более привлекательным? Шрифтовые иконки помогут украсить записи, страницы или меню. И когда речь идёт о шрифтовых иконках, то нельзя не вспомнить Font Awesome.


Как использовать иконки Font Awesome на веб-сайте WordPress

Смотрите также:

  • Руководство по иконическим шрифтам в WordPress для новичков
  • Добавляем шрифты для иконок в WordPress
  • Как добавить дополнительный блок иконок в WordPress
  • Как отобразить различные иконки для отдельных рубрик
  • WordPress плагины для добавления шрифтов Google Fonts

Если вы хотели бы добавить большую коллекцию иконок Font Awesome на веб-сайт WordPress, то читайте о двух быстрых и простых методах, как добавить их на WordPress.

Что такое Font Awesome Icons и чем они полезны?

Если вы используете тему Divi, то наверняка знакомы с шрифтовыми иконками от Elegant Icon Font, которые есть в комплекте с темой.

Как использовать иконки Font Awesome на веб-сайте WordPress

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 в хэдер темы:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

Этот код перенесёт таблицу стилей в Font Awesome из Bootstrap CDN. Вы также можете без труда загрузить таблицу стилей напрямую из Font Awesome. Нет никакой разницы.

Но мы не рекомендуем вставлять этот код прямиком в файл темы header.php. Если тема разрешает добавление кастомных скриптов в header.php из меню параметров, то лучше воспользоваться данным вариантом:

Как использовать иконки Font Awesome на веб-сайте WordPress

Но если тема не может такого сделать, то необходимо добавить этот скрипт самостоятельно правильным образом(с точки зрения WordPress), а, использовать следующий программный код и вставить его в functions.php темы(ещё лучше, если это будет functions.php дочерней темы):

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa');function enqueue_load_fa() { wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css');}
Как использовать иконки Font Awesome на веб-сайте WordPress

Вставляем иконки Font Awesome

Когда вы добавите код в тему, вы будете готовы начать использовать иконки Font Awesome везде.

Найти полный список иконок можно на сайте Font Awesome.

Например, если вы ищите иконку «Download», то просто вводите в поиск «download» и выбираете из доступных вариантов:

Как использовать иконки Font Awesome на веб-сайте WordPress

После выбора понравившейся иконки вы можете без труда увидеть экран с различными размерами данной иконки. В центре экрана вы должны заметить небольшой блок кода:

Как использовать иконки Font Awesome на веб-сайте WordPress

Вам необходимо скопировать весь программный код выбранной иконки. Потом, вы можете легко вставить этот программный код куда угодно в WordPress, неважно, какой редактор вы для этого используете. Просто убедитесь, что вы вставляете его, когда редактор переключен в режим «Текст»:

Как использовать иконки Font Awesome на веб-сайте WordPress

Вы можете вернуться к визуальной вкладке после окончания внедрения кода. После публикации записи вы увидите иконку во фронтенде:

Как использовать иконки Font Awesome на веб-сайте WordPress

Как увеличить размер иконки Font Awesome

Как вы видите в примере сверху, иконки довольно маленькие. Если вам необходимо их увеличить, то необходимо добавить пару строк кода. Например, чтобы увеличить размер иконок в два раза, вам необходимо добавит «fa-2x» в класс иконок.

К примеру, вот изначальный программный код иконки:

<i class="fa fa-download" aria-hidden="true"></i>

А вот программный код с увеличенной в 2 раза иконкой:

<i class="fa fa-download fa-2x" aria-hidden="true"></i>

В реальной жизни иконка будет выглядеть сейчас так:

Как использовать иконки Font Awesome на веб-сайте WordPress

Вот список кусочков кода, которые вам необходимо добавить, чтобы настроить размер:

  • 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 на веб-сайте WordPress

Вы можете попробовать использовать и иные плагины, но нам кажется, что этот наилучший по нескольким причинам:

  • Он регулярно обновляется. Это важно, так как пару популярных плагинов Font Awesome не обновлялись годами.
  • Автоматически импортирует новый набор иконок Font Awesome.
  • Может вам добавлять иконки через шорткод или тот же код, что мы использовали.

Для начала установите и активируйте плагин.

Он добавит новый раздел меню Параметра → Better Font Awesome в консоли. Вам не необходимо настраивать ничего, просто следуйте инструкциям, которые предоставит плагин:

Как использовать иконки Font Awesome на веб-сайте WordPress

Добавление иконок

Чтобы добавить иконки к записям, вы можете легко использовать тот же способ, который мы показывали вам в ручной версии, или использовать шорткод. Преимущество использования шорткода состоит в том, что вам не необходимо менять вкладку «Text» в редакторе.

Формат шорткода, который вам нужен:

[icon name=»NAME»]

Где NAME – это название иконки на сайте Font Awesome:

Как использовать иконки Font Awesome на веб-сайте WordPress

Вы можете добавить этот шорткод в модуль Divi или в обычный текстовый редактор WordPress. Вот пример, где мы добавили иконку через шорткод в текстовый модуль во время использования Divi Visual Builder:

Как использовать иконки Font Awesome на веб-сайте WordPress

Visual Builder выводит это так:

Как использовать иконки Font Awesome на  веб-сайте WordPress

Вы можете использовать тот же шорткод в обычном редакторе WordPress.

Если вы планируете настроить размер иконки при помощи шорткода, то просто добавьте тэг класса с размером иконки:

[icon name=»NAME» class=»fa-2x»]

Итоги

Вот и всё! Два различных метода добавить векторные иконки Font Awesome на веб-сайт WordPress. Мы предпочитаем ручной способ, так как он отнимает меньше времени и потом не необходимо волноваться о потенциальной поломке плагина.

Но если вы не планируете трогать код темы, то лучше используйте плагин Better Font Awesome.

Сейчас очередь! А вы используете Font Awesome?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *