В одной из предыдущих статей мы писали об использовании иконочных шрифтов как одном из способов достижения адаптивности картинок на сайте. Здесь ссылка на эту статью. И сегодня мы поговорим об одном из самых популярных иконочных шрифтов – 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 этого шрифта.
Даже если вы очень талантливы и прилагаете большие усилия, для некоторых результатов просто нужно время:…
Этот практический урок поможет вам перенести данные из вашего Excel-файла (с некоторыми конкретными столбцами) в…
Пиво – один из самых популярных напитков, который наряду с чаем и кофе известен во…
Довольно часто у программистов возникает соблазн написать какую-нибудь обширную функцию, которая должна решать определенную задачу.…
Дискуссии вокруг этой темы вас, вероятно, уже утомили. Но я в данной статье постараюсь показать…
Консоль браузера (также известная как консоль JavaScript или веб-консоль) — это мощный инструмент для разработчиков,…