Главная > Веб мастерская > WordPress > Как использовать иконки Font Awesome на WordPress

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

Хотите сделать ваш сайт ещё более привлекательным?

Шрифтовые иконки помогут украсить ваши записи, страницы или меню.

И когда речь идёт о шрифтовых иконках, то нельзя не вспомнить Font Awesome.

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

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

Что такое Font Awesome Icons?

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 из меню настроек, то лучше воспользоваться этим вариантом:

Но если ваша тема не позволяет такого сделать, то нужно добавить этот скрипт самостоятельно, а именно, использовать следующий код и вставить его в 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

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

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

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

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

Вам нужно скопировать весь код выбранной иконки. Потом, вы можете вставить этот код куда угодно в 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>

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

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

  • 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 в вашей консоли. Вам не нужно настраивать ничего, просто следуйте инструкциям, которые предоставит плагин:

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

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

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

[icon name="NAME"]

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

 

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

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

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

Вот и всё!

Два разных способа добавить векторные иконки Font Awesome на ваш сайт WordPress.

Мы предпочитаем ручной метод, поскольку он отнимает меньше времени и потом не нужно волноваться о потенциальной поломке плагина.

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

Удачи!

NEW!!! Полезное, нужное, важное:

Где заработать в интернете деньги? Надёжно, честно, без обмана!
Платежные системы, кошельки и обменники для работы

Лучшие хостинги, сервера и прочее для сайтов

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

смена домена вордпресс

WordPress смена домена (как поменять домен сайта)

Одно дело, если нужно выполнить перенос сайта между разными хостинг аккаунтами – там у вас остается старая версия сайта. Но как быть когда сменить адрес блога нужно на том же аккаунте, с той же базой данных, без потери данных?

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

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