Начало работы. Font Awesome и IcoMoon: работа с иконочным шрифтом Font awesome не работают иконки

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

Что такое иконочный шрифт?

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

Плюсы и минусы

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

• оформление через CSS;
• векторная природа позволяет легко масштабировать их до любых размеров без потери качества;
• один HTTP запрос вместо нескольких, в отличии от растровых изображений;
• широкая браузерная поддержка, включая IE6.

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

Так же, как правило, они могут отображаться только в одном цвете, если вы не воспользуетесь CSS трюками. Кроме того, некоторые иконки могут быть созданы под конкретные размеры, например 16×16, 32×32, 48×48 и т.д. Если по некоторым причинам вы измените размер на 25×25, то результат может быть нечётким.

Стоит отметить, что помимо иконочных шрифтов есть ещё одно популярное решение: SVG. Их использование может решить некоторые проблемы. Например, вы можете использовать более одного цвета.

Так же мы рассмотрим четыре различных примера использования иконочных шрифтов.

Font Awesome

Font Awesome - это библиотека, содержащая 439 иконок. Она является абсолютно бесплатной как для личного, так и для коммерческого использования. Изначально она разрабатывалась для Bootstrap, однако вы можете использовать её и отдельно.

Работа с Font Awesome

Самый простой способ подключить Font Awesome - подключить через CDN. Если же вы работаете оффлайн - вам придётся скачать набор иконок.

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

Для использования иконок, вы должны разместить их внутри элемента span или i . Затем, нужно присвоить им два класса: fa плюс второй класс, который должен соответствовать названию иконки, например fa-home. можно найти названия всех доступных иконок.

Дополнительную информацию и множество примеров можно найти на этой странице.

Теперь давайте рассмотрим несколько примеров.

Font Awesome. Пример #1

В первом примере, мы создаём вертикальное меню. Сначала помещаем иконки внутри элемента i и вдвое увеличиваем их размер, используя предопределённый класс fa-2x. Затем оформляем их с помощью CSS.

HTML будет выглядеть следующим образом:

А вот и CSS:

Nav li { background: #ededed; height: 80px; width: 80px; line-height: 80px; text-align: center; } nav li:not(:first-child) { margin-top: 1px; } nav li a { outline: none; position: relative; width: 100%; height: 100%; } nav i { color: steelblue; vertical-align: middle; } nav li a:after { background: #ededed; content: attr(data-name); display: none; margin-left: 1px; width: 160px; height: 80px; left: 80px; position: absolute; font-size: 1.2em; } nav li a:hover:after { display: inline-block; }

Font Awesome. Пример #2

В следующем примере мы создадим простой социальный виджет. Снова помещаем иконки внутри элемента i, удваиваем их размер. Затем оформляем с помощью CSS.

HTML для одной иконки будет выглядеть следующим образом:

CSS для стилизации значков:

Section a { padding: 7px; color: black; } section i { vertical-align: middle; transition: color .3s ease-in-out; } section a:nth-child(1):hover i { color: #3b5998; }

Font Awesome. Пример #3

В третьем примере мы используем значки для формы авторизации. Применяем другой предопределённый fa-fx класс, чтобы установить фиксированную ширину (примерно 1.25em).

HTML и CSS похожи на предыдущие. Результат .

Обратите внимание на иконки в форме, а также на социальные ссылки.

Иконки IcoMoon

IcoMoon - это ещё один популярный иконочный шрифт. На этот раз мы можем выбрать из двух пакетов: один с открытым исходным кодом, другой премиум. Более детальную информацию можно найти . В зависимости от выбранного пакета, количество и формат доступных значков будет отличаться. Например, в бесплатном пакете 450 иконок, в платном 1266.

Заключение

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

Что такое Font Awesome и в чем его преимущество?

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

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

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

Как добавить Font Awesome в WordPress вручную (без плагина)

Добавить шрифт Font Awesome на сайт WordPress вручную довольно легко. Этот процесс состоит из 2-х частей: во-первых, нужно подключить файл стилей этого шрифта в секции , во-вторых, в исходном коде (в шаблоне, или в режиме Текст редактора в Консоли) использовать определенный класс для нужной иконки.

1-й этап: подключение файла стилей шрифта Font Awesome

Первым шагом является добавление CSS-стилей Font Awesome в шаблон header.php активной темы. Добавьте код подключения файла CSS-стилей в секцию :

Этот код подключит файл с таблицей стилей Font Awesome из репозитория Bootstrap по CDN. Вы также можете непосредственно скачать файл стилей с официального сайта Font Awesome (https://fontawesome.com/) и подключить его со своей темы.

Более предпочтительный вариант подключения не только стилей, но и скриптов, заключается в использовании специальной функции подключения в файле functions.php активной темы. Вместо того, чтобы редактировать файл header.php , добавьте следующий код в файл functions.php активной темы:

Function load_font_awesome() { wp_enqueue_style("font-awesome-style", "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); } add_action("wp_enqueue_scripts", "load_font_awesome");

Использование иконок Font Awesome

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

Чтобы найти полный список иконок, перейдите на официальный сайт Font Awesome в раздел меню Icons и выберите нужный значок. Например, если вы хотите добавить иконку с «пальцем вверх», найдите иконку «thumbs-up» (https://fontawesome.com/icons/thumbs-up?style=regular).

У каждой иконки есть своя страничка, на которой вы можете увидеть приблизительный вид иконки при разных размерах, узнать код Unicode, а также можете скачать иконку в формате SVG. Наибольший интерес в данный момент для нас представляет пример кода для вставки иконки. Например, для иконки с «пальцем вверх», пример кода будет следующим:

ВАЖНО! Учтите, что в нашем примере мы используем версию шрифта 4.7.0. На данный момент самой последней версией является версия 5.1.0, и в ней используется другой формат классов. Например, выше указанная иконка подключается в формате .

После того как вы выбрали иконку, скопируйте код для ее подключения и вставьте в нужном месте. Это может быть любой файл шаблон в активной теме. Либо вы можете вставлять иконки через Консоль. При редактировании поста/страницы в режиме Текст добавьте нужный класс для тега i (или, например, тега span).

При использовании файла стилей Font Awesome разных версий синтаксис формата класса будет разным:

Краткий итог

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

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

CSS код и примеры использования этого шрифта-иконок «Font Awesome». Ниже Вы видите сам CSS код и таблицу с примерами классов, содержимого (content:"") и результат.

Шрифты-иконки Font Awesome

Подключение шрифта:

Добавьте css файл шрифта, который необходим (в зависимости от версии).
Если структура Вашего сайта (приложения) имеет другую файловую структуру (файлы лежат в других папках), то измените все пути на свои пути (например: /assets/css/).
Если Вы не понимаете о чем идет речь, перейдите . Затем нажмите сочетания клавиш Ctrl+U или правой кнопкой мыши на пустом месте страницы > Исходный код страницы / Исходный текст страницы (как-то так должно быть написано в контекстном меню).
Например, подключить шрифт FA можно так:

Данным кодом будет подключена максимальная версия шрифта со всеми иконками

Также закиньте в эту папку /css/fonts/ папку из архива _сайт-89_fontawesome-pro-5.8.2.zip/fontawesome-pro-5.8.2-web.zip/webfonts
Добавьте такой код на страницу или в CSS файл, чтобы можно было легко использовать шрифт FA (, А НЕ ) , {font-family:"Font Awesome 5 Pro","Font Awesome 5 Brands";speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

Как использовать шрифты-иконки?

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

Получится:

Скачать файл

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

Fa-star-o:before{content:"\f006";} 1986 иконок

Хотите сделать ваш сайт ещё более привлекательным? Шрифтовые иконки помогут украсить ваши записи, страницы или меню. И когда речь идёт о шрифтовых иконках, то нельзя не вспомнить Font Awesome .

Если вы хотите добавить большую коллекцию иконок Font Awesome на ваш сайт WordPress, то читайте о двух быстрых и простых способах, как добавить их на WordPress.

Что такое Font Awesome Icons и чем они полезны?

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

Вставляем иконки Font Awesome

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

Найти полный список иконок можно на веб-сайте Font Awesome .

К примеру, если вы ищите иконку «Download», то просто вводите в поиск «download» и выбираете из доступных вариантов:

После выбора понравившейся иконки вы можете увидеть экран с разными размерами этой иконки. В центре экрана вы должны заметить небольшой блок кода:

Вам нужно скопировать весь код выбранной иконки. Потом, вы можете вставить этот код куда угодно в WordPress, неважно, какой редактор вы для этого используете. Просто убедитесь, что вы вставляете его, когда редактор переключен в режим "Текст":

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

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

Как вы видите в примере сверху, иконки довольно маленькие. Если вам нужно их увеличить, то нужно добавить несколько строк кода. К примеру, чтобы увеличить размер иконок в два раза, вам нужно добавит «fa-2x » в класс иконок.

Например, вот изначальный код иконки:

А вот код с увеличенной в 2 раза иконкой:

В реальной жизни иконка будет выглядеть теперь так:

Вот список кусочков кода, которые вам нужно добавить, чтобы изменить размер:

• fa-lg – увеличить на 33%
• fa-2x – увеличить в 2 раза
• fa-3x – увеличить в 3 раза
• fa-4x – …
• fa-5x – … ну вы поняли!

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

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

Если вам не нравится предыдущий способ, то вы можете установить плагин. Существует множество различных плагинов, где доступна эта функция, но одним из самых популярных является Better Font Awesome :

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

• Он регулярно обновляется. Это важно, поскольку несколько популярных плагинов Font Awesome не обновлялись годами.
• Автоматически импортирует новый набор иконок Font Awesome.
• Позволяет вам добавлять иконки через шорткод или тот же код, что мы использовали.

Для начала установите и активируйте плагин.

Он добавит новый раздел меню Настройки → Better Font Awesome в вашей консоли. Вам не нужно настраивать ничего, просто следуйте инструкциям, которые предоставит плагин:

Добавление иконок

Чтобы добавить иконки к записям, вы можете использовать тот же метод, который мы показывали вам в ручной версии, или использовать шорткод. Преимущество использования шорткода состоит в том, что вам не нужно менять вкладку «Text» в вашем редакторе.

Формат шорткода, который вам нужен:

Где NAME – это название иконки на веб-сайте Font Awesome:

Вы можете добавить этот шорткод в модуль Divi или в обычный текстовый редактор WordPress. Вот пример, где мы добавили иконку через шорткод в текстовый модуль во время использования Divi Visual Builder:

Visual Builder отображает это так:

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

Если вы хотите изменить размер вашей иконки с помощью шорткода, то просто добавьте тэг класса с размером иконки:

Итоги

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

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

Теперь ваша очередь! А вы используете Font Awesome?

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

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

Иконки для сайта. Быстро.

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

Легкие обновления

Так как каждый сайт будет иметь уникальный набор иконок, то вы с легкостью можете его обновлять без каких-либо изменений в коде. Чудненько =).

Или

Расширенная кастомизация Легко

Использование CSS

1. Вставьте нижеследующий код в тег в HTML-код вашего вебсайта.

   "path/to/font-awesome/css/font-awesome.min.css" >

2. Посмотрите примеры

Использование Sass или Less

Используйте этот метод для кастомизации Font Awesome 4.7.0 при помощи LESS или SASS.

1. Скопируйте полностью папку font-awesome в папку вашего проекта.
2. В вашем проекте откройте файлы font-awesome/less/variables.less или font-awesome/scss/_variables.scss и отредактируйте @fa-font-path или $fa-font-path соответственно, для того, чтобы указать путь к папке со шрифтами.

   @fa-font-path : "../font" ;

   Путь к папке со шрифтами должен указывать относительно скомпилированной папки css.

3. Скомпилируйте ваши LESS или SASS файлы при помощи компилятора. Должно все заработать.
4. Посмотрите примеры для начала работы с Font Awesome!

Или

Продвинутый уровень Профи

1. Добавьте эту строку в Gemfile вашего приложения:

   gem "font-awesome-less"

2. Далее запустите:

   $ bundle

3. Или установите в ручную:

   $ gem install font-awesome-less

Если вы используете Rails, то вставьте нижеуказанный код, например, в файл application.less:

1. Добавьте нижеуказанную строку в Gemfile вашего проекта:

   gem "font-awesome-sass"

2. Далее запустите:

   $ bundle

3. Или установите вручную:

   $ gem install font-awesome-sass

Если вы используете Rails, то вставьте нижеуказанный код, например, в файл application.scss:

@import "font-awesome-sprockets" ; @import "font-awesome" ;

Дополнительная информация

Валидаторы

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

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

Internet Explorer 8 и @font-face

IE8 имеет несколько проблем с @font-face при совместном использовании с псевдоэлементом:before . Font Awesome как раз использует такую комбинацию. Если страница закеширована или загружена без наведенного курсора мыши на окно браузера (например, при нажатии на кнопку "обновить" или при загрузке контента через фрейм), то страница будет сгенерирована до подгрузки шрифта. Наведение курсора мыши на страницу (body) должно отобразить некоторые иконки, наведение курсора на остальные не подгруженные иконки также их реанимирует. данной проблемы.