Описание тега font-awesome

Font Awesome - это культовый шрифт, разработанный для использования с интерфейсной структурой Twitter Bootstrap.

Font Awesome в настоящее время находится в версии 4.7. Для тех, кто не обновлялся или не может обновиться до последней версии, документация по версии 3.2.1 доступна здесь. Чтобы различать версии, ищитеfa fa-[name] для версии 4.x и icon-[name] для версии 3.x.

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

Текущая версия содержит 675 иконок-шрифтов в 16 группах (включая 41 новую иконку в ветке 4.7):

• Иконки веб-приложений
• Значки доступности
• Руки Иконки
• Транспортные иконки
• Гендерные иконки
• Значки типов файлов
• Иконки Spinner
• Значки управления формой
• Иконки платежей
• Значки диаграмм
• Валюта Иконки
• Значки текстового редактора
• Направленные значки
• Иконки видеоплеера
• Бренд Иконки
• Медицинские иконки

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

Вы можете подмножество font-awesome с помощью icnfnt или fontello для создания определенных наборов значков вместо загрузки всего семейства значков.

Он бесплатен для коммерческого использования и распространяется по лицензии SIL Open Font License 1.1.

CDN

Font awesome доступен в виде размещенного файла в сетях доставки контента, например, BootstrapCDN и Cloudflare CDN.

stackru Snippet Quick Start v4.7.0

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" >

Синтаксис, версия 3.x ( документация):

icon-[name]

с некоторыми примерами:

<i class="icon-cogs"></i>
<i class="bookmark-empty"></i> 
<i class="icon-facebook-sign"></i>
<i class="icon-arrow-left"></i>

где [name]можно найти в списке значков, а различные расширения и модификации можно найти в старой документации. См. Также проблемы при обновлении.

Синтаксис, версия 4.x ( документация):

fa fa-[name]-[shape]-[o]-[direction]

Где:

• [name]это имя значка ( список значков).
• [shape] - необязательная форма фона значка: либо circle или square.
• [o] - необязательная обведенная версия значка.
• [direction] - направление, в котором указывают определенные значки (стрелки и т. д.).

Например:

<i class="fa fa-cogs"></i>
<i class="fa fa-bookmark-o"></i>
<i class="fa fa-facebook-square"></i>
<i class="fa fa-arrow-left"></i>

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

i.fa {
    color: purple;
    font-size: 64px;
    padding: 5px 10px;
}