Вы хотите добавить шрифты значков в свой WordPress блог ? В этот праздничный сезон каждый хочет больше персонализировать свой блог, чтобы предложить лучший образ последнего. Иконки шрифтов являются частью аранжировок, которые регулярно создаются.

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

iconfontswp-1

Небольшая точность на шрифтах-иконках

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

icomoon

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

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

Вот несколько проектов шрифтов-иконок:

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

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

Как добавить иконки шрифтов с плагином WordPress

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

Первое, что вам нужно сделать, это установить и активировать плагин. Лучше шрифт Высокий, доступный на WordPress.org. После активации плагина вам необходимо перейти по следующему адресу: " Настройки> Лучший шрифт Awesome«, Чтобы настроить плагин. Однако этот плагин может работать без конфигурации, поэтому пользователям фактически не нужно ничего менять.

betterfontawesome

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

[icon name = "rocket"]

[icon name = "облако"]

[icon name = "наушники"]

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

При нажатии на нее откроется новое окно, в котором вы можете найти значок и вставить его.

фа-posteditor

Вы заметите, что плагин добавит кнопку, похожую на эту:

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

Если вы хотите добавить дополнительные параметры настройки, вы можете добавить свой собственный класс для пользовательского стиля.

[icon name = "university" class = "myclass" unprefixed_class = ""]. Вот как вы настроите класс своего значка:

.fa-MyClass {размер шрифта: 100px; цвет: #FF6600; } 

Это действительно настолько просто. Вы заметили, что перед классом стоит «fa-». Не забудьте добавить это в код CSS.

Как добавить иконку шрифта на WordPress вручную

Как упоминалось ранее в этом уроке, я покажу вам, как добавить шрифт значка на ваш блог вручную.

Некоторые иконочные шрифты, такие как Font Awesome, доступны через серверы CDN по всему миру и могут быть связаны с ваш блог непосредственно.

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

Первый метод: 

Это самый простой способ. Вам просто нужно добавить эту строку в " »Вашей темы (обычно это файл header.php).


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

Функция wp_load_fa () {wp_enqueue_style ( 'WPB-фа', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'); } add_action ( 'wp_enqueue_scripts', 'wp_load_fa');

Второй метод: 

Второй способ не самый простой, но он позволяет использовать шрифты значков в вашей теме. Все, что вам нужно сделать, это загрузить и разархивировать пакет font-icon (сжатый файл) в файле «Шрифты» вашей темы.

Затем вам просто нужно скачать значок шрифта и переименовать его. Что вам нужно сделать дальше, так это загрузить шрифт значка с вашего сервера.

ftpupload

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

Функция wp_load_fa () {wp_enqueue_style ( 'WPB-фа', get_stylesheet_directory_uri () '/fonts/css/font-awesome.min.css.'); } add_action ( 'wp_enqueue_scripts', 'wp_load_fa');

Это все, что нужно сделать.

Как вручную отображать иконки шрифтов в вашем блоге

Зайдите в блог Font Awesome и посмотрите список доступных шрифтов. Щелкните любое изображение, и вы увидите код этого изображения.

фа-optinmonster

Просто скопировать и вставить и следующий код:

<i class="fa-optin-monster"></i>

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

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