Людей естественным образом привлекает внешний вид Веб-сайт WordPress, настолько, насколько их привлекает письменный контент, которым вы делитесь. На самом деле, согласно Джефф Bullas ", Статьи с изображениями имеют на 94 больше просмотров, чем статьи без изображений.

Если вы спросите меня, это огромный рост просмотров страниц.

И в чем причина именно?

Просто добавьте несколько высококачественных изображений, относящихся к статье, в свой контент.

А как насчет фотографий на вашем Веб-сайт которые выходят за рамки скриншотов и фотографий? Как насчет изображений, которые не только привлекают внимание, но и выполняют полезную функцию?

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

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

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

Но есть решение: иконки шрифтов.

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

Итак, начнем.

Что такое иконочные шрифты и зачем их использовать?

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

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

Fonticone на сайте

Зачем использовать иконочные шрифты?

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

Вот несколько веских причин, по которым иконочные шрифты являются лучшим выбором:

  • Легко расширяется без потери качества
  • Настраивается по цвету и оттенку
  • 100% реагировать
  • Работает как спрайты изображений CSS, но ведет себя как текст
  • Facile меню utiliser
  • Совместимые браузеры
  • Настроить непрозрачность, поворот и т. Д.
  • Размер файла меньше
  • Не жертвовать скорость или производительность вашего сайта

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

Установка иконок шрифтов на ваш сайт с помощью плагина

Better Font Awesome — это Плагин Wordpress бесплатное программное обеспечение, позволяющее автоматически интегрировать последнюю версию Font Awesome в ваш проект WordPress. Кроме того, он поставляется с CSS, шорткодами и генератором шорткодов TinyMCE.

Этот плагин имеет множество полезных функций для владельцев сайтов:

  • Регулярное обновление последней версии
  • Возможность переключения между версиями Font Awesome без изменения коротких кодов
  • Поддержка других популярных плагинов шрифтов, включая их шорткоды.
  • Выдано jsDelivr CDN

Шаг 1: установка и активация лучшего шрифта Awesome

Для начала установите и активируйте плагин «Better Font Awesome» через панель инструментов WordPress, как и любой другой плагин.

Сначала перейдите к " Плагины> Добавить И искать Лучше шрифт Высокий .

Установите и активируйте плагин Better font awesome

Затем выберите установить сейчас »И нажмите« активировать .

После активации плагин добавляет ссылкуЛучше шрифт ВысокийПод меню настроек вашей панели управления WordPress.

Новый пункт меню плагина Better font awesome

Шаг 2: настройка параметров плагина

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

Улучшены настройки конфигурации плагина font awesomeЗдесь вы можете сделать следующее:

  • Версия: Выберите версию «Better Font Awesome», которую вы хотите использовать.
  • Используйте минимизированный CSS: Установите этот флажок, если вы хотите использовать уменьшенную версию CSS.
  • Удалить существующий шрифт печати: установите этот флажок, чтобы попытаться удалить закодированные фрагменты и шорткоды, добавленные другими плагинами и темами.
  • Скрыть отзывы администратора: Скрыть предупреждения администратора по умолчанию, которые появляются при возникновении ошибок API и CDN.

В дополнение к минимальному количеству параметров Better Font Awesome, есть небольшой раздел «Использование», в котором объясняется, как добавлять значки на ваш сайт.

Использование лучшего плагина font awesome

Шаг 3. Добавление значков на ваш сайт

Есть три простых способа добавить значки на ваш сайт с помощью «Better Font Awesome» - с помощью шорткода, HTML или TinyMCE.

№1. Добавление иконок с помощью шорткода

Чтобы добавить значки на свой сайт с помощью шорткода, сначала посетите " Являются удивительными Чтобы увидеть полный список доступных значков, которые можно использовать.

Здесь вы можете найти нужный значок. Например, если вам нужен значок «электронная почта», просто найдите это ключевое слово и выберите значок, который хотите использовать, щелкнув по нему.

Ищите значок на fontawesomeПосле нажатия на значок, который вы хотите добавить, вы увидите экран, показывающий изображение значка с его разными размерами и небольшой блок кода:

Значок шрифта со всеми его размерамиПросто скопируйте блок кода и вставьте его в любое место на своем сайте, используя вкладку «Текстовый редактор». Вот так редактор будет выглядеть на вашем сайте:

Редактор кода с иконками на wordpressРедактор кода с иконками на wordpressВ итоге вот что посетителей увидят, когда они зайдут на ваш сайт:

Wordpress значок плакат результат
# 2. Добавление иконок с помощью HTML-кода

Как мы видели в разделе " Использовать У вас есть возможность использовать HTML-код для вставки значков на свой сайт. Однако разработчики плагинов принимают во внимание, что использование HTML требует префиксов версии.

Вот почему они рекомендуют вам вместо этого использовать шорткоды. Однако, если вы хотите использовать HTML-код, в Font Awesome есть полезная информация здесь.

# 3. Добавление иконок с помощью TinyMCE

Вероятно, это самый простой способ добавить значки на ваш сайт. В режиме «Визуальный редактор» просто щелкните значок «Вставить». Оттуда прокрутите доступные варианты значков или сузьте результаты с помощью функции поиска.

Кнопка поиска значка визуального редактора Wordpress

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

Если вы хотите узнать, как настроить значки на вашем сайте, обратитесь к примерам " Являются удивительными .