Вы хотите добавить шрифты значков в свой WordPress блог ? В этот праздничный сезон каждый хочет больше персонализировать свой блог, чтобы предложить лучший образ последнего. Иконки шрифтов являются частью аранжировок, которые регулярно создаются.
В этом уроке я покажу вам, как добавить иконочные шрифты в ваш WordPress блог.
Небольшая точность на шрифтах-иконках
Значки шрифтов содержат символы или пиктограммы вместо букв и цифр. Размер этих пиктограмм можно легко изменить с помощью кода CSS, не влияя существенно на размер ваших страниц.
Иконочные шрифты можно использовать для отображения довольно распространенных символов. На обычном веб-сайте вы можете использовать их для отображения значка корзины, кнопок загрузки, ползунков, кнопок социальных сетей и даже в меню навигации WordPress.
Есть несколько шрифтов-иконок, доступных с различными вариантами. Фактически, каждая установка WordPress использует Dashicons, который представляет собой набор шрифтов. Эти значки используются на панели пользователя приборной панели.
Вот несколько проектов шрифтов-иконок:
В этом уроке я буду использовать Font Awesome, который, кстати, является одним из наиболее часто используемых и бесплатных шрифтов для иконок.
Мы рассмотрим возможность добавления иконочных шрифтов в ваш WordPress тема. Первый метод выполняется с помощью плагина, и мы также покажем вам, как это сделать без плагина.
Как добавить иконки шрифтов с плагином WordPress
FontAwesome поддерживается несколькими плагинами. Использование плагина позволяет легко добавить значок шрифта в вашу тему, не изменяя исходный код.
Первое, что вам нужно сделать, это установить и активировать плагин. Лучше шрифт Высокий, доступный на WordPress.org. После активации плагина вам необходимо перейти по следующему адресу: " Настройки> Лучший шрифт Awesome«, Чтобы настроить плагин. Однако этот плагин может работать без конфигурации, поэтому пользователям фактически не нужно ничего менять.
Этот плагин позволяет добавлять шрифты значков следующим образом:
[icon name = "rocket"]
[icon name = "облако"]
[icon name = "наушники"]
Вы можете добавить значки в интерфейс редактирования статьи, выбрав один из доступных значков. Просто создайте новую статью, и вы увидите значок " Вставить значок кнопки На панели инструментов визуального редактора.
При нажатии на нее откроется новое окно, в котором вы можете найти значок и вставить его.
Вы заметите, что плагин добавит кнопку, похожую на эту:
[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 (сжатый файл) в файле «Шрифты» вашей темы.
Затем вам просто нужно скачать значок шрифта и переименовать его. Что вам нужно сделать дальше, так это загрузить шрифт значка с вашего сервера.
Теперь, когда вы готовы загрузить значки-шрифты в тему 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 и посмотрите список доступных шрифтов. Щелкните любое изображение, и вы увидите код этого изображения.
Просто скопировать и вставить и следующий код:
<
i
class
=
"fa-optin-monster"
></
i
>
В режиме текстового редактора. Вы можете использовать этот класс, чтобы изменить значок шрифта.
Если вам нужно узнать больше о CSS, я приглашаю вас прочитать этот учебник. Это все для этого урока. Не стесняйтесь поделиться им с друзьями в своих любимых социальных сетях.