Как добавить красивые иконки

Font Awersome на сайт WordPress

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

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

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

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

 

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

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

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

 

1.1. Подключение таблицы стилей (CSS) шрифта  Font Awersome к теме WordPress

Подключить таблицу стилей можно несколькими способами.

Способ 1. Загружать шрифт с CDN

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

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

И хотя такой код еще работает, сейчас официальный сайт Font Awersome предлагает немного другой подход.  Для подключения к CDN необходимо сообщить сайту Font Awersome свой e-mail и код подключения придет на электронную почту. Примерно в таком виде:

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

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

Кстати, зарегистрировавшись на сайте https://cdn.fontawesome.com можно получить доступ к дополнительным настройкам шрифта:

Вставить код можно в «шапку» сайта (файл header.php). Например, для темы WordPress Divi код можно вставить в настройках темы:

Другой способ подключения иконок — добавить код в файл 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 дочерной темы, тем самым сохранишь его при обновлении темы:

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

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

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

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

 

1.2. Использование шрифта Font Awersome на сайте WordPress

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

Чтобы найти полный список иконок, перейди на веб-сайт Font Awersome в список иконок и найди нужную иконку. Например, если ты хочешь разместить иконку «загрузить» (download), задай поиск среди иконок и выбери одну из списка, нажав на нее:

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

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

использование шрифта Font Awersome - вставить код иконки

Результат:

использование шрифта Font Awersome - результат вставки код иконки

 

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

Как можешь видеть в приведенном выше примере — по умолчанию иконки довольно малы. Чтобы увеличить размер иконки — добавь в ее описание небольшой код. Например, чтобы сделать значок в два раза больше нужно добавить «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 Awersome.

 

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

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

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

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

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

[icon name="NAME"]

где «Name» — название иконки:

использование шрифта Font Awersome при помощи плагина

Пример:

Результат:

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

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

 

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

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

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

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

Заключение

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

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

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

l

П.С. Создатели Font Avensome анаосировали версию 5.0 и для этого проекта собирают деньги на kickstarter.com. Собирать будут до 01 декабря 2016 года. Сегодня (30 октября) у тебя еще есть время поучаствовать в этом проекте.