Шрифт font awesome

Подключение шрифта font awesome к вашему сайту WordPress

Приветствуем вас! В последнее время пользователи в первую очередь смотрят на дизайн и приятный внешний вид сайта. Сделать дизайн сайта WordPress более привлекательным нам поможет шрифт font awesome. Что за зверь такой этот шрифт? Если говорить коротко, то Font Awesome является иконочным шрифтом для сайта.

Значки шрифтов содержат пиктограммы или символы вместо букв и цифр. Эти пиктограммы можно легко изменить с помощью CSS без существенного увеличения размера загрузки вашей страницы. Значки шрифтов могут использоваться для отображения обычно используемых символов.

На типичном веб-сайте вы можете использовать их для своей корзины покупок, кнопок, функциональных блоков, слайдеров, кнопок социальных сетей и даже в навигационных меню Вордпресс. Достоинством Awesome является огромная библиотека, которая в настоящее время содержит более 630 значков.

Существенным преимуществом является гибкая поддержка, которая отражается в удобном для пользователя виде на каждом мобильном устройстве. Все это означает, что значки шрифта Awesome намного превосходят просто использование статического изображения. Из множества коллекций шрифтов, Awesome является одним из самых лучших.

Преимущества значков font awesome

• Их можно масштабировать без потери качества
• Возможность позиционировать и манипулировать ими, как вы хотите
• Поддержка любого браузера
• Частое обновление значков

Хотите подключить шрифт Font Awesome к вашему сайту WordPress? К сожалению, вы не можете просто вскочить и начать использовать шрифты Awesome icons на вашем веб-сайте сразу. Вам нужно будет выполнить некоторые шаги по настройке шрифта, прежде чем вы сможете вставлять значки.

Мы рассмотрим два способа добавления шрифтов значков в WordPress. Первый метод с использованием плагина, а второй покажет вам, как добавить шрифт значка без плагина.

1 Способ. Добавление шрифтов значков в WordPress с помощью плагинов

Использование плагина позволяет легко добавлять шрифт значка в любую тему Вордпресс без изменения кода. Нам понадобится плагин Better Font Awesome. После установки и активации вы можете перейти к настройкам, чтобы настроить параметры плагина. Плагин отлично работает, поэтому большинству пользователей ничего не нужно менять.

Плагин позволяет добавлять значки шрифтов, используя короткие коды:

[icon name="rocket"]
[icon name="cloud"]
[icon name="headphones"]

Вы также можете добавить значки в редактор сообщений, просто выбрав значок. Далее создайте новое сообщение или отредактируйте существующее, и вы увидите кнопку «Insert Icon (Вставить значок)». Нажатие на него вызовет всплывающее окно, в котором вы можете найти значок и вставить его.

Вы заметите, что плагин добавит короткий код в ваш редактор сообщений. У нас он выглядит вот так:

[icon name="wordpress" class="" unprefixed_class=""]

Если вы хотите настроить значок, то это легко сделать с помощью собственного CSS-класса для добавления пользовательских стилей.

.fa-universityicon {
font-size:100px;
color:#FF6600;
}

Все делается легко и просто. Теперь давайте посмотрим, как вы можете добавлять шрифты значков в WordPress без плагина.

2 Способ. Добавление шрифтов значков в WordPress без плагина

Как уже упоминалось ранее, шрифты значков — это только шрифты и могут быть добавлены на ваш сайт, если вы добавляли какие-либо пользовательские шрифты. Некоторые шрифты значков, такие как Font Awesome, доступны на серверах CDN через Интернет и могут быть напрямую связаны с вашей темой WP.

Вы также можете загрузить весь каталог шрифтов в папку в теме WordPress, а затем использовать эти шрифты в своей таблице стилей. Поскольку мы используем Font Awesome, мы покажем вам, как вы можете добавить его, используя оба метода.

Способ 1

Все, что вам нужно сделать, это добавить эту единственную строку кода в файл header.php вашей темы непосредственно перед тегом </ head>.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
}

Это самый простой метод, но он может вызвать конфликты с другими плагинами. Лучший подход к загрузке таблиц стилей или скриптов в WordPress заключается в том, чтобы правильно их убрать.

Вместо того, чтобы ссылаться на таблицу стилей из шаблона заголовка вашей темы, добавляем следующий код в файл functions.php вашей темы или в плагин для конкретного сайта.

function wpb_load_fa () {
wp_enqueue_style ( 'wpb-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' );
}
add_action ( 'wp_enqueue_scripts', 'wpb_load_fa' );

Метод 2

Второй метод не самый простой, но он позволит вам иметь шрифты внутри вашей темы. Просто загрузите шрифты значков и распакуйте пакет. Теперь вам нужно будет подключиться к вашему сайту с помощью FTP-клиента и перейти в каталог темы WordPress.

Вам нужно создать новую папку и называть ее шрифтами. Затем вам нужно загрузить содержимое папки шрифтов в каталог шрифтов на вашем сервере.

Теперь вы готовы загружать шрифты значков в вашу тему. Просто добавьте этот код в файл functions.php вашей темы или в плагин для конкретного сайта.

function wpb_load_fa () {
wp_enqueue_style ( 'wpb-fa', get_stylesheet_directory_uri () . '/fonts/css/font-awesome.min.css' );
}
add_action ( 'wp_enqueue_scripts', 'wpb_load_fa' );

Вы успешно загрузили Font Awesome в свою тему WordPress. Теперь вы будете добавлять фактические любые значки в тему WordPress, сообщения или страницы.

Ручное отображение шрифтов в WordPress

Перейдите на веб-сайт Font Awesome, чтобы просмотреть полный список доступных значков. Нажмите на любой значок, который вы хотите использовать, и вы сможете увидеть имя значка. 

Скопируйте имя значка и используйте его в WordPress.

<i class="fa fa-grav" aria-hidden="true"></i>

Вы можете стилизовать этот значок в таблице стилей вашей темы следующим образом:

.fa-optin-monster {
font-size:50px;
color:#FF6600;
}

Вы также можете комбинировать разные значки и одновременно стилизовать их. Например, скажем, вы хотите отобразить список ссылок со значками рядом с ними. Вы можете обернуть их под элементом с определенным классом.

<div class="icons-group">
<a class="icons-group-item" href="#"><i class="fa fa-home fa-fw"></i>Home</a>
<a class="icons-group-item" href="#"><i class="fa fa-book fa-fw"></i>Library</a>
<a class="icons-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>Applications</a>
<a class="icons-group-item" href="#"><i class="fa fa-cog fa-fw"></i>Settings</a>
</div>

Теперь вы можете стилизовать их в таблице стилей вашей темы следующим образом:

.icons-group-item i {
color: #333;
font-size: 50px;
}
.icons-group-item i:hover {
color: #FF6600
}

Мы надеемся, что эта статья помогла вам научиться легко добавлять шрифты значков в тему WordPress. У нас на этом все. Всем пока!

С уважением Вячеслав и Валерия!