В одной из предыдущих статей мы писали об использовании иконочных шрифтов как одном из способов достижения адаптивности картинок на сайте. Здесь ссылка на эту статью. И сегодня мы поговорим об одном из самых популярных иконочных шрифтов – Font Awesome. Сегодня мы на практике посмотрим, как подключить Font Awesome на сайте на движке WordPress без использования плагина и как использовать этот шрифт.
Иконочный шрифт Font Awesome – это шрифт, созданный с помощью значков (иконок), но это ни в коем случае не набор картинок. Почему это различие так важно? Поскольку шрифт Font Awesome:
Значки Font Awesome используются на сайтах как обычные шрифты: их можно стилизовать и манипулировать ими так же, как и обычными шрифтовыми символами, используя CSS свойства как @font-face, font-family, font-size, и т.д. Благодаря этому вам не придется беспокоиться о размерах или отступах под отдельные браузеры или размеры экранов.
В настоящее время Font Awesome предлагает набор из более 2000 различных и бесплатных иконок, которые вы можете добавить практически в любом месте на своем WordPress сайте. Если вам мало такого количества иконок, то переходите на платное Pro (всех иконок больше 53000!).
Добавить шрифт 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. На данный момент самой последней версией является версия 6.7.2, и в ней используется другой формат классов. Например, выше указанная иконка подключается в формате <i class="far fa-thumbs-up"></i>. И совсем скоро появится версия 7! Следовательно, нужно этот момент отслеживать.
Иконки в формате версии 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, а также поделитесь своими впечатлениями, если вы используете версии 6.x.x этого шрифта.
Когда речь заходит о веб-серверах, два имени всегда на слуху: Apache и Nginx. Apache —…
В мире веб-разработки мы постоянно сталкиваемся с проблемой: "А у меня на компьютере все работает!".…
На заре моей карьеры веб-разработчика все было относительно просто: установил локальный сервер (помните Denwer?), положил…
Если вы когда-либо интересовались, как ускорить свой сайт на WordPress, вы, наверное, слышали о "кешировании".…
Когда мы говорим о веб-разработке, первое, что приходит на ум — это HTML и CSS.…
В мире SEO есть фраза, которую повторяют так часто, что она уже стала клише: "Content…