Как использовать Font Awesome на своем веб-сайте WordPress

Если у вас есть выбор между использованием векторного значка или статического изображения, рекомендуется использовать вектор. Они маленькие, быстро загружаются и могут масштабироваться до любого размера без потери разрешения. Font Awesome - это превосходная библиотека векторных значков, которые вы можете использовать на своих веб-сайтах, и они, вероятно, имеют практически любую форму или бренд, который вам нужен. А что лучше всего? Это бесплатно. Во-вторых, это просто.

Подпишитесь на наш канал Youtube

Font Awesome иконки WordPress

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

Следует помнить, что (в большинстве случаев) значки Font Awesome будут доставляться на ваш сайт как настоящие шрифты. Отсюда и название Font Awesome. Вы сможете стиль и манипулировать ими во всех отношениях , что вы обычно мог бы характер шрифта, с помощью CSS с помощью @ шрифтом лица и шрифт Потрясающих семейств шрифтов.

Благодаря этому вам не придется беспокоиться о размере или интервале для каждого отдельного браузера или области просмотра. Если это звучит здорово, значит, так оно и есть. И вот как вы это делаете:

Установка Font Awesome

Хотя есть способ установить и использовать Font Awesome вручную, для пользователей WordPress есть способ лучше. Прекрасные ребята из FA выпустили официальный плагин Font Awesome для WordPress, и он прекрасно работает.

После установки и активации плагина у вас теперь есть доступ к шорткоду [[icon name]], а также к фрагментам HTML. Пока у вас есть удобный список значков FA, чтобы вы точно знали, какой значок вам нужен. На странице настроек плагина (находится в разделе « Настройки» - «Font Awesome» ) вы увидите, как все настроено по умолчанию. В общем, их можно хранить и использовать. Большинству людей больше ничего не понадобится.

Параметр « Метод», вероятно, наиболее важен для большинства людей. Вы можете переключаться между Webfont и SVG . В то время как SVG дает вам больше возможностей и функций (таких как преобразование мощности и маскирование), Font Awesome CDN доставляет значки в виде файлов SVG, а не в виде шрифта. Хотя это в некотором смысле лучше, SVG не распознается многими браузерами, и WordPress не всегда хорошо работает с изображениями SVG. Поэтому мы предлагаем не рисковать с версией webfont.

То же самое и с Font Awesome: если вы не уверены в разнице или не знаете, почему вам нужно использовать SVG, то, вероятно, проще всего придерживаться метода webfont по умолчанию.

Использовать значки Font Awesome на своем сайте WordPress очень просто. Просто добавьте <i class = ”fab fa-wordpress”> </i> в любое место, где вы хотите, чтобы значок отображался. Обязательно проверьте библиотеку значков, чтобы узнать, какое имя ввести.

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

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

Установка значков Font Awesome вручную

Первое, что вам нужно сделать, это перейти на сайт Font Awesome. Оттуда нажмите кнопку « Начать использовать бесплатно» . Они действительно предлагают платные планы для людей, у которых есть сайты с высокой посещаемостью и которым нужно корпоративное решение, но широкая публика может обойтись бесплатной версией. Вы получаете 1500 иконок бесплатно и более 5000 вариантов по тарифному плану Pro.

Следующий шаг - просто скопировать / вставить. Но вам нужно убедиться, что вы выделили опцию webfont, как мы обсуждали ранее.

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

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

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

Если ваша тема не поддерживает интеграцию кода

Если вы не можете найти такое место в своей теме, это также легко сделать вручную. Однако для этого вам придется покопаться в файлах ядра вашей темы, но это очень быстрое копирование / вставка, и (как правило) это довольно безопасно. Перейдите в Внешний вид - Редактор на панели инструментов WP и найдите файл header.php .

Найдите строку, где написано </head> , и перед ней вам нужно вставить тот же код из Font Awesome. Нажмите « Обновить файл» , и вы сразу сможете начать использовать значки FA. Опять же, вы не получите шорткод, установив таким образом Font Awesome.

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

Дополнительные возможности для установки

И если у вас есть другие, более конкретные потребности в Font Awesome, они предлагают множество способов получить доступ к библиотеке. От установки NPM и Yarn до интеграции со Sketch и React, у них есть масса вариантов, если вам это нужно не только для WordPress.

Стилизация иконок Font Awesome

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

На веб-сайте Font Awesome есть примеры того, как это сделать. Они показывают размер с помощью своего значка иглу и дополнительного класса, такого как fa-xs или fa-xl или fa-2x для определенного размера.

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

<div style="font-size: 0.5rem;">
  <i class="fas fa-igloo fa-10x"></i>
</div>

Заключение

Вот и все! Классно, правда? Независимо от того, используете ли вы плагин Font Awesome WordPress или вставляете код вручную, для того, чтобы ваш сайт заработал, потребуется всего несколько шагов. Font Awesome популярен не просто так, отчасти благодаря простоте использования. Так что выходите и будьте крутыми!

Какой ваш любимый способ использования иконок Font Awesome?

Изображение для статьи предоставлено Font Awesome