Пропустить

Как добавить иконки, шрифты на тему WordPress

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

iconfontswp-1

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

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

icomoon

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

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

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

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

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

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

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

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

betterfontawesome

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

[icon name = »ракета»]

[icon name = "cloud"]

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

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

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

фа-posteditor

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

[icon name = »университет» класс = »» unprefixed_class = »»]

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

[icon name = "университет" class = "myclass" unprefixed_class = ""] Вот как вы можете настроить класс вашей иконки:

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

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

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

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

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

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

Это самый простой способ. Просто добавьте эту строку в раздел «<head>» вашей темы (обычно она находится в файле header.php).

<Link отн = "таблица стилей" HREF = "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

Этот метод прост, но он может вызвать много конфликтов с другими плагинами. Лучший подход - это загрузить скрипты из 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');

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

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

Просто скачайте значок шрифта и переименуйте его. Далее вам нужно загрузить шрифт со своего сервера.

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 и посмотрите список доступных шрифтов. Нажмите на любое изображение, и вы увидите код изображения.

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [FREE]

фа-optinmonster

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

<i класс="Fa-Оптина-монстр"> </i>

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

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

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
4 акции
доля2
чирикать
Регистрация2