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

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

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

Заключение

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 иконок

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) должно отобразить некоторые иконки, наведение курсора на остальные не подгруженные иконки также их реанимирует. данной проблемы.

Хотите сделать ваш сайт ещё более привлекательным? Шрифтовые иконки помогут украсить ваши записи, страницы или меню. И когда речь идёт о шрифтовых иконках, то нельзя не вспомнить 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?

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

Что такое шрифт Font Awesome?

Шрифт Awesome нужен для того, чтобы использовать иконки, не загружая при этом на сайт какие-либо изображения (подборки иконок и тд). Данный шрифт (в версии 4.1) включает в себя 441 иконку, которые становятся доступны при применении класса конкретной иконки для элемента. Но об этом позже. Ниже Вы можете увидеть малую часть примеров иконок:

Плюсы шрифта
- Бесплатно
- Простой доступ через CSS
- 441 иконка (в версии 4.1)
- Работает в IE
- Масштабируемость
- Отлично отображается в читалках и i-технике!
- Многие дизайнеры уже оценили и используют шрифт!

Как установить шрифт Font Awesome (с иконками)?

1. Скачиваем шрифт с сайта http://fontawesome.io/ . Весит немного, примерно 400 Кб.

2. Копируем распакованные файлы в Ваш проект (например, где индексный файл). По названиям файлов скорее всего совпадений не будет с уже имеющимися, так как названия у них достаточно специфические.

3. Подключаем файлы в head Вашего проекта. Предлагаю два варианта - если лежит выше по директории и если в одной.

4. Используем шрифт . Смотрим пример ниже:

Иконка фото
Иконка Check/Галочка

Примеры шрифт Font Awesome

Допустим идёт проработка каких-либо действий по списку:

• Готово


• Готово


• Загружается


• Ожидание

Иконки ожидания:

Цитата:

Как жаль, что не дано
Нам вовремя понять,
С кем можем мы найти,
А с кем лишь потерять…
Поворачиваем иконки:

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
icon-flip-vertical