Как установить иконки Font Awesome 4.7 на WordPress сайт

Введение

Если вы заинтересованы сделать дизайн сайта более привлекательным - разместите на сайте тематические иконки.  Лучше в качестве иконок используйте иконочный шрифт.

Иконочный шрифт - это шрифт, где вместо букв и цифр содержатся символы и специальные знаки. Вы можете использовать их как обычный текст и оформлять отображение через CSS так же, как это делается с текстом.

Пожалуй, самый известный иконочный шрифт - это Font Awesome.

В этой статье приведены способы добавления иконочного шрифта Font Awesome 4.7 на сайт WordPress.

1. Как добавить Font Awesome 4.7 на сайт WordPress с помощью кода

Иконки Font Awersome можно добавить на сайт Wordprecc двумя способами: с использованием кода или с помощью плагина. Если не хотите разбираться с кодом - смотрите ниже как установить шрифт с помощью плагина.

По сути, для использования шрифта на сайте нужно сделать два шага: первый - подключить таблицу стилей (CSS) шрифта к сайту; второй - найти нужную иконку и вставить ее в текст на сайте.

Подключить таблицу стилей можно несколькими способами: подключить шрифт с CDN или загрузить только шрифт к себе на сайт.

Подключение всего шрифта  Font Awesome 4.7 к теме WordPress

Самый простой способ подключить Font Awesome 4.7 - загружать иконочный шрифт с CDN. Ранее для этого предлагалось вставить в "шапку" сайта (файл header.php) следующий код:

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

И хотя такой код еще работает, официальный сайт Font Awesome предлагает немного другой подход.

Зарегистрируйтесь на сайте Font Awesome 4.7. Для этого введите к поле вашу электронную почту

Код подключения Font Awesome 4,7 в письме будет примерно в таком виде:

<script src="https://use.fontawesome.com/имя-встариваемого-файла.js"></script>

где "имя-встариваемого-файла" - уникальный код файла.

Зарегистрируйтесь на CDN Font Awesome.  После регистрирации на сайте https://cdn.fontawesome.com вы можете получить доступ к дополнительным настройкам шрифта. Ссылка для регистрации приведена в письме.

Куда на своем сайте вставить код Font Awesome 4.7

Способ 1. Код в header.php

Вставить код подключения иконок можно в "шапку" сайта (файл header.php).

Например, для темы Divi код можно вставить в настройках темы:

Способ 2. Код в файл functions.php

Еще одни способ подключения иконок - добавить код в файл functions.php (в этом случае в header.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.7.0/css/font-awesome.min.css' );
}

Приведенный выше код желательно вставить в файл function.php дочерной темы, тем самым сохранив его при обновлении темы:

Способ 3. Разместить шрифт в папке на сайте

Можно скачать файл с шрифтом Font Awersome и разместить его в папку на своем сайте. Для подключения шрифта тогда используйте код, вставив его в шапку сайта:

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

где "path/to" - путь к файлам шрифта.

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

После того, как код CSS подключен к теме, можно начать использовать шрифт Font Awesome на сайте.

Чтобы найти полный список иконок, перейдите на веб-сайт Font Awesome в список иконок и найдите нужную иконку.

Например, если вы хтите разместить иконку "загрузить" (download). Задайте поиск среди иконок и выберите одну из списка, нажав на нее:

Нажмите на выбранной иконке и увидите иконку  Font Awesome в различных размерах. Внизу размещен  блок кода для вставки на сайте:

Скопируйте этот код и вставьте его в любом месте содержимого сайта WordPress.  Правда, код надо вставлять на вкладке "Текст" редактора.

Результат:

Как сделать иконки Font Awesome большими в размере

Как можете видеть в приведенном выше примере - по умолчанию иконки довольно малы. Чтобы увеличить размер иконки - добавьте в их описание небольшой код.

Например, чтобы сделать значок в два раза больше нужно добавить "fa-2x" к классу иконки.
Например, было (одинарный размер):

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

стало (двойной размер):

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

Список кодов для изменения размеров:

• fa-lg – увеличить размер на 33%
• fa-2x – двойной размер
• fa-3x – увеличить в три раза
• fa-4x – …
• fa-5x – …увеличить в 5 раз!

Больше "трюков" с иконками (вращение, анимация) можешь увидеть на сайте Font Awesome.

2. Как добавить Font Awesome на сайт WordPress с помощью плагина

Использовать шрифт Font Awesome на сайте WordPress поможет один из наиболее известных плагинов Better Font Awesome.

Плагин достаточно регулярно обновляеться и автоматически выбирает последний набор шрифтов Font Awersome.

Плагин позволяет добавлять иконки также с помощью шорткодов:

Формат шорткода:

[icon name="NAME"]

где "Name" - название иконки:

Пример:

Результат:

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

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

Недостаток использования на сайте Font Awesome

Следует отметить и небольшой минус в использовании иконочного шрифта: при подключении шрифта Font Awesome размер страницы увеличиваеться почти на 100 кБ. Поэтому немного увеличивается время ее загрузки. Ниже приведены результаты проверки тестового сайта на ресурсе https://tools.pingdom.com/ Размер страницы без подключения шрифта:

Размер страницы и скорость загрузки при подключении шрифта:

Как с этим недостатком бороться - поговорим в одной из следующих статей.

Заключение

Font Awesome - средство чтобы улучшить дизайн сайта.
В статье приведены способы добавить иконки на сайт WordPress: с помощью кода и с помощью плагина.
Я предпочитаю добавлять шрифт с помощью кода.
Но если ты не хочете возиться с кодом темы - то плагин тоже хороший вариант.
Недостаток подключения шрифта - увеличивается размер загружаемой страницы. Как с ним бороться - рассмотрю в одной из следующих статей.

Поделись своими мыслями в комментариях ниже.

Удачи!
Александр Коваль