Как добавить иконки Font Awesome в WordPress — полное руководство

Это то, о чем это руководство. Когда вы закончите читать, вы будете точно знать, как:

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

Давайте копать…

Почему вы должны потратить время на добавление значков Font Awesome в WordPress

Иконки Font Awesome потрясающие, потому что, как следует из названия, они представляют собой иконочный шрифт, а не изображения. Это означает, что вы можете делать такие классные вещи, как:

• Измените размер без потери качества, потому что значки являются векторами.
• Меняйте цвета, добавляйте анимацию и используйте другие манипуляции с CSS.

Все это говорит о том, что значки Font Awesome намного лучше, чем просто использование статического изображения.

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

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

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

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

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

Вот как работает весь процесс, шаг за шагом:

Шаг 1. Добавьте таблицу стилей Font Awesome в свою тему WordPress.

Как я уже сказал, ваш первый шаг — добавить таблицу стилей Font Awesome CSS в вашу тему WordPress. Хотя вы можете получить это прямо с веб-сайта Font Awesome, я предпочитаю использовать версию, размещенную на Bootstrap CDN.

В настоящее время эта ссылка:

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

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

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

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

Поскольку следовать лучшим практикам кода WordPress — это хорошо, я определенно рекомендую вам использовать как дочернюю тему, так и функцию постановки в очередь.

Хорошо, вот как это сделать:

Перейдите в Внешний вид → Редактор и выберите файл functions.php для вашей дочерней темы.

Затем вставьте этот код:

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

Обязательно сохраните изменения, и все готово! Не слишком больно, правда?

Шаг 2. Вставьте значки Font Awesome

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

Когда вы нажимаете на значок, Font Awesome выдает вам код, необходимый для использования значка:

Все, что вам нужно сделать, это поместить этот код на вкладку « Текст » редактора WordPress, чтобы добавить значок на ваш сайт.

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

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

Как добавить иконки Font Awesome в WordPress с помощью плагина

Если вы предпочитаете использовать плагин вместо того, чтобы вручную ставить в очередь таблицу стилей Font Awesome, на WordPress.org есть надежный бесплатный вариант под названием Better Font Awesome.

В дополнение к постоянному добавлению последней таблицы стилей на ваш сайт, Better Font Awesome также:

• Позволяет использовать шорткоды для встраивания значков Font Awesome.
• Дает вам раскрывающееся меню в редакторе TinyMCE для вставки значков.

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

Шаг 1: Установите и активируйте плагин

Чтобы добавить Font Awesome, все, что вам нужно сделать, это установить и активировать плагин. Больше ничего нет.

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

Шаг 2. Вставьте значки Font Awesome

Чтобы вставить значки Font Awesome с помощью плагина, у вас есть два разных варианта:

• Используйте код с веб-сайта Font Awesome, как я показал в предыдущем разделе.
• Используйте шорткоды, которые можно сгенерировать из раскрывающегося списка.

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

Когда вы перейдете к созданию нового сообщения или страницы, вы увидите новую кнопку « Вставить значок » рядом с кнопкой « Добавить медиа ». Если вы нажмете на нее, вы увидите все доступные значки Font Awesome, а также возможность отфильтровать результаты:

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

И это все, что нужно!

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

Как стилизовать значки Font Awesome и изменить их размер

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

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

Большинство этих советов взяты прямо со страницы примеров Font Awesome, поэтому вам не нужно беспокоиться о совместимости.

Изменить размер значков Font Awesome

Начнем с простого — увеличения размера иконок Font Awesome. По умолчанию значки довольно маленькие, поэтому вы наверняка столкнетесь с такой ситуацией.

Чтобы увеличить размер значка, вы можете использовать любой из этих модификаторов:

• fa-lg — увеличивает размер на 33%
• fa-2x - удваивает размер
• fa-3x - тройной размер
• фа-4х – …
• фа-5х – …

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

• <i class=”fa fa-download fa-3x ” aria-hidden=”true”></i>
• [имя значка = «скачать» класс = « fa-3x »]

Например, это:

Становится этим на переднем конце:

Повернуть значки Font Awesome

Вы также можете легко поворачивать значки Font Awesome, чтобы изменить их ориентацию.

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

• fa-rotate-90 — поворачивает на 90 градусов
• fa-rotate-180 — поворачивается на 180 градусов
• fa-rotate-270 — поворачивается на 270 градусов
• fa-flip-horizontal — переворачивает иконку по горизонтальной оси
• fa-flip-vertical — переворачивает иконку по вертикальной оси

Добавляем анимацию к иконкам Font Awesome

Вы также можете добавить базовую анимацию к своим значкам. Font Awesome дает вам два разных модификатора для добавления вращения:

• fa-spin — добавляет плавное вращение
• fa-pulse — заставляет иконку вращаться в 8 разных шагов

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

Изменить цвет значка Font Awesome

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

Но не волнуйтесь – это очень просто.

Все, что вам нужно, это этот небольшой код:

.fa-NAME {
color: COLOR;
}

Где fa-NAME — это фактическое имя вашего значка, а COLOR — это цвет, на который вы хотите его изменить.

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

Вы можете легко добавить пользовательский CSS, выбрав « Внешний вид» → «Настройщик» → «Дополнительный CSS ».

Подведение итогов

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

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