Шрифт Font Awesome: Подключение на WordPress и применение
Опубликовано: 01.09.2018
Дизайн сайта строится на многих вещах: цвет, оформление, стиль и, конечно же, веб-иконки. Они одушевляют неодушевленное, то есть если взять пустой графический квадрат, то он небогат смыслом, а если к нему добавить веб–иконку, к примеру, конверт, то это уже будет указатель со значением. В просторах интернета можно найти сотни сайтов с исходниками иконок или специальные сервисы с поиском веб – иконок .
Но, помимо всего прочего, есть возможность добыть иконки другим путем, о чем сейчас и пойдет речь. Имеется в виду шрифт Font Awesome – это Клондайк веб-иконок численность, которых, свыше 450 шт. Плюсом является не только количество, но и удобство в применении. А также еще можно подчеркнуть векторное значение, что при изменении размера иконки, качество не портится.
Как подключить шрифты в WordPress, Elementor, Astra и любую тему
Подключаем шрифт Font Awesome на WordPress
Процедура довольно стандартная и устанавливается буквально в пару шагов. Первым делом скачиваем шрифт Font Awesome с сайта . В скаченном файле вы обнаружите ZIP архив. Извлекаем из архива содержимое, в нем находится папка с названием шрифта и актуальной на данный момент версией. В основной папке имеются еще подпапки: стили, шрифты и т.д.
Использование Font Awesome. Ультрасовременный набор иконок для веб сайтов
Вторым действием является непосредственно загрузка шрифта Font Awesome на хостинг. Подключитесь к сайту через любой FTP – клиент и закиньте ранее скаченную папку в установленную вами тему.
Последнее что осталось сделать — это подключить стили. Одна из подпапок носит название «CSS» в нем находится два файла: font-awesome.css, font-awesome.min.css они одинаковые, разница лишь в форматировании. В этих файлах заданы все нужные стили и импорт шрифта. Вот почему необходимо подключить один из них. Откройте файл header.php и между тегами <head> </head> подключите стили.
<link rel="stylesheet" href="<?php bloginfo( 'template_url' ); ?>/font-awesome-4.2.0/css/font-awesome.css" />Главное, укажите относительный путь, если меняете название папок, то не забываем менять и в подключении стилей.
Способ №2
А можно пойти совсем простым путем и подключить шрифт Font Awesome не загружая себе на сайт, а импортировать напрямую (подключение CDN). Для этого в файле functions.php вставьте следующий код:
function font_awesome() { if (!is_admin()) { wp_register_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'); wp_enqueue_style('font-awesome'); } } add_action('wp_enqueue_scripts', 'font_awesome');Чтобы не возникло ошибки вставляйте код в конце перед знаком ?>.
Примеры использования шрифта Font Awesome
После подключения шрифта на WordPress становятся доступны все его возможности. Как упоминалось выше насчет количества иконок, то с полным каталогом можете ознакомиться по . При нажатии на одну из иконок вы увидите соответствующий ее класс для применения.
Простой пример.
HTML
<div class="e1"> <i class="fa fa-download"></i> Скачать файл! </div>CSS
.e1 { background: #555; width: 150px; padding: 10px; text-align: center; color: #fff; } .fa-download { color: #6fe332; font-size: 23px !important; padding-right: 5px; }
Для оформления иконки используйте ее класс как показано в примере и смело меняйте цвет, размер расположение и т.д.
Есть еще одна особенность. Ведь не всегда удобно добавлять иконку так, как показано выше, через тег <i>. Можно использовать Unicode добавляя основному классу псевдоэлемент и выводить иконку через content: "";.
Простой пример.
HTML
<div class="e1">Нравится</div>CSS
.e1 { background: #eee; margin: 200px; padding: 10px; text-align: center; width: 120px; color: #555; box-shadow: 0 0 2px #919191; } .e1:before { content: "\f004"; font-family: FontAwesome; padding-right: 5px; color: #cc0000; }
Обратите внимание на две первые строчки в классе с псевдоэлементом (.e1:before). В первой задается Unicode, а во второй название шрифта. Это нужно чтобы элемент не присвоил шрифт от своего родителя. Полный список Unicode находится по . Просто копируйте иконку и вставляйте между кавычками в content: "";.
Вопросы задавайте в комментариях, буду рад помочь.