TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

2 052

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

Font Awesome WordPress Иконки

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

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

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

Установка Font Awesome

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

Прекрасный шрифт WordPress

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

Прекрасный шрифт WordPress

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

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

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

Прекрасный шрифт WordPress

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

Прекрасный шрифт WordPress

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

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

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

Прекрасный шрифт WordPress

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

Прекрасный шрифт WordPress

В большинстве тем есть место для автоматической вставки кода в

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

01

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

Прекрасный шрифт WordPress

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

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

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

Прекрасный шрифт WordPress

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

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

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

Прекрасный шрифт WordPress

Styling Font Awesome Icons

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

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

Прекрасный шрифт WordPress

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

, чтобы он работал в рамках ваших ограничений.

01

02

03

<div style="font-size: 0.5rem;">

  <i class="fas fa-igloo fa-10x"></i>

</div>

Завершение

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

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

Статья с изображением любезно предоставлена ​​Font Awesome

Источник записи: https://www.elegantthemes.com

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