Введение
Если вы заинтересованы сделать дизайн сайта более привлекательным — разместите на сайте тематические иконки. Лучше в качестве иконок используйте иконочный шрифт.
Иконочный шрифт — это шрифт, где вместо букв и цифр содержатся символы и специальные знаки. Вы можете использовать их как обычный текст и оформлять отображение через 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: с помощью кода и с помощью плагина.
Я предпочитаю добавлять шрифт с помощью кода.
Но если ты не хочете возиться с кодом темы — то плагин тоже хороший вариант.
Недостаток подключения шрифта — увеличивается размер загружаемой страницы. Как с ним бороться — рассмотрю в одной из следующих статей.
Поделись своими мыслями в комментариях ниже.
Удачи!
Александр Коваль
П.С. Создатели Font Awesome выпустили версию 5.+ Поэтому некоторые выкладки в статье возможно устарели