В одной из предыдущих статей мы писали об использовании иконочных шрифтов как одном из способов достижения адаптивности картинок на сайте. Здесь ссылка на эту статью. И сегодня мы поговорим об одном из самых популярных иконочных шрифтов – Font Awesome. Сегодня мы на практике посмотрим, как подключить Font Awesome на сайте на движке WordPress без использования плагина и как использовать этот шрифт.
Иконочный шрифт Font Awesome – это шрифт, созданный с помощью значков (иконок), но это ни в коем случае не набор картинок. Почему это различие так важно? Поскольку шрифт Font Awesome:
В настоящее время Font Awesome предлагает набор из 1264 различных и бесплатных иконок, которые вы можете добавить практически в любом месте на своем WordPress сайте. Если вам мало такого количества иконок, тогда переходите на платное Pro.
Добавить шрифт Font Awesome на сайт WordPress вручную довольно легко. Этот процесс состоит из 2-х частей: во-первых, нужно подключить файл стилей этого шрифта в секции <head>, во-вторых, в исходном коде (в шаблоне, или в режиме Текст редактора в Консоли) использовать определенный класс для нужной иконки.
1-й этап: подключение файла стилей шрифта Font Awesome
Первым шагом является добавление CSS-стилей Font Awesome в шаблон header.php активной темы. Добавьте код подключения файла CSS-стилей в секцию <head>:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
Этот код подключит файл с таблицей стилей Font Awesome из репозитория Bootstrap по CDN. Вы также можете непосредственно скачать файл стилей с официального сайта Font Awesome (https://fontawesome.com/) и подключить его со своей темы.
Более предпочтительный вариант подключения не только стилей, но и скриптов, заключается в использовании специальной функции подключения в файле functions.php активной темы. Вместо того, чтобы редактировать файл header.php, добавьте следующий код в файл functions.php активной темы:
function load_font_awesome() {
wp_enqueue_style( 'font-awesome-style', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'load_font_awesome' );
После того, как вы подключили нужные стили в свою тему, вы уже можете начать использовать значки шрифта Font Awesome практически в любом месте сайта.
Чтобы найти полный список иконок, перейдите на официальный сайт Font Awesome в раздел меню Icons и выберите нужный значок. Например, если вы хотите добавить иконку с «пальцем вверх», найдите иконку «thumbs-up» (https://fontawesome.com/icons/thumbs-up?style=regular).
У каждой иконки есть своя страничка, на которой вы можете увидеть приблизительный вид иконки при разных размерах, узнать код Unicode, а также можете скачать иконку в формате SVG. Наибольший интерес в данный момент для нас представляет пример кода для вставки иконки. Например, для иконки с «пальцем вверх», пример кода будет следующим:
<i class="fa fa-thumbs-o-up"></i>
ВАЖНО! Учтите, что в нашем примере мы используем версию шрифта 4.7.0. На данный момент самой последней версией является версия 5.1.0, и в ней используется другой формат классов. Например, выше указанная иконка подключается в формате <i class="far fa-thumbs-up"></i>.
Иконки в формате версии 4.7.0 вы можете посмотреть здесь: https://fontawesome.com/v4.7.0/icons/
После того как вы выбрали иконку, скопируйте код для ее подключения и вставьте в нужном месте. Это может быть любой файл шаблон в активной теме. Либо вы можете вставлять иконки через Консоль. При редактировании поста/страницы в режиме Текст добавьте нужный класс для тега i (или, например, тега span).
При использовании файла стилей Font Awesome разных версий синтаксис формата класса будет разным:
<i class="fa {код иконки}"></i> <!-- синтаксис версий 4.x.x -->
<i class="fas {код иконки}"></i> <!-- синтаксис версий 5.x.x -->
<i class="far {код иконки}"></i> <!-- пример: стиль regular иконки версии 5.x.x -->
<i class="fal {код иконки}"></i> <!-- пример: стиль light иконки версии 5.x.x -->
В сегодняшней статье мы рассмотрели практические моменты добавления иконочного шрифта Font Awesome на свой сайт WordPress. Если у вас есть вопросы по данной теме, озвучьте их в форме комментирования ниже.
Напишите в комментариях свое отношение к использованию Font Awesome, а также поделитесь своими впечатлениями, если вы используете версии 5.x.x этого шрифта.
Системный блок — это центральная часть персонального компьютера, которая включает основные аппаратные компоненты: процессор, видеокарту,…
Думали ли вы когда-нибудь о карьере веб-разработчика/программиста? Чтобы самостоятельно создавать свои веб-сайты, приложения, программы? Если…
Ничто в современном мире не остается долго неизменным. Применимо к ремеслу, это утверждение означает, что…
Если представить жизнь в форме Игры, тогда каждому из нас в ней отведена своя роль.…
Тема (шаблон) – это своеобразный скелет сайта на WordPress. И, к сожалению, иногда этот «скелет»…
Контактная форма (или любая другая) на сайте – это очень важный компонент. На нее возложен…