Введение

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

Иконочный шрифт — это шрифт, где вместо букв и цифр содержатся символы и специальные знаки. Вы можете использовать их как обычный текст и оформлять отображение через 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 регистрация
На почту вам придет письмо, в котором будет приведен код и ссылка на создание аккаунта в CDN Awesome.
Font Awesome письмо

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

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

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

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

настройки использования шрифта Font Awersome 4.7

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

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

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

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

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

настройка использования шрифта Font Awersome 4.7 в дочерной теме вордпресс

Способ 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 - поиск иконки

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

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

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

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

Результат:

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

 

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

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

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

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

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

<i class="fa fa-download fa-2x" aria-hidden="true"></i>
использование шрифта Font Awersome - результат вставки код иконки 2x размер

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

  • 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.

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

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

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

[icon name="NAME"]

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

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

Пример:

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

Результат:

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

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

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

 

к оглавлению ↑

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

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

размер страницы без использования шрифта Font Awersome

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

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

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

к оглавлению ↑

Заключение

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

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

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

l

П.С. Создатели Font Awesome выпустили версию 5.+ Поэтому некоторые выкладки в статье возможно устарели

Рубрики: Создание сайта на WordPress Метки: Иконочные шрифты и Дизайн сайта

Об авторе:

Александр Коваль

Александр Коваль

Предприниматель. IT-специалист. Создаю интернет-магазины, лендинги и другие сайты. Помогаю поддерживать их работу. Расширяю функционал и возможности сайтов на WordPress. Пишите если нужна помощь с сайтом или разработка "с нуля"

Share via
Send this to a friend