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

Как использовать и оформлять иконки с помощью CSS?

Для того, чтобы использовать иконки, вам необходимо следовать этим шагам:

1) Подключите иконки к сайту

Скопируйте код, предоставленный веб-страницей Font Awesome, и вставьте в каждого шаблона или страницы, где хотите использовать иконки Font Awesome.

Для использования последней версии иконок this page смотрите эту страницу .

Здесь мы используем версию 5.8.1 link rel , чтобы определить связь между текущим документом и файлом со ссылкой:

8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Загрузка и установка не требуются.

2) Добавьте иконки к вашему UI

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

i fa-camera">i>

3) Добавьте стиль к иконкам

Можно легко изменить размер и цвет иконки и даже добавить к ней тени, используя только CSS. Иконки также могут быть перемещаемы и анаимируемы.

Как использовать иконки Font Awesome

Иконки могут находится фактически где угодно, если используете стилевой префикс (fa) и название иконки. Font Awesome используется вместе со строчными элементами, и рекомендуется придерживаться к ним при проекте с согласованным HTML элементом.

Для ссылки на иконку вам необходимо использовать имя иконки с префиксомpan fa- и предпочитаемый вами стиль с соответствующим префиксом ( fas, fal, far или fab ).

Используйте элемента для ссылки на элемент:

i fa-camera">i>

Или используйте элемент span :

span fa-camera">span>

Префикс fa устарел в версии 5. Новые префиксы по умолчанию fas (сплошной стиль), fab (бренды), far (обычный стиль) и fal (тонкий стиль).

Пример

html> html> head> title>Иконки Font Awesome title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> head> body> h2>Пример иконок h2> p>Камера p> i class="fas fa-camera"> i> p>Машина p> i class="fas fa-car"> i> p>Конверт p> i class="fas fa-envelope"> i> body> html>

Масштаб иконок Font Awesome и их цвет

Иконки наследуют размер шрифта их родительского контейнера, чтобы соответствовать любому тексту, который может быть использован вместе с ними. Можно увеличить или уменьшить масштаб иконок относительно унаследованного размера шрифта с помощью таких классов, как fa-xs , span >fa-sm , fa-lg , fa-2x и др.

Что касается цвета, он может быть установлен с помощью CSS свойства color. Просто необходимо установить иконки внутри элемента и задать для него цвет в стиле, или просто установить стиль для элемента .

Пример

html> html> head> title>Иконки Font Awesome title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> div < color: #1c87c9; > style> head> body> h2>Пример иконок с указанными размерами и цветами h2> div> i class="fas fa-camera fa-xs"> i> i class="fas fa-camera fa-sm"> i> i class="fas fa-camera fa-lg"> i> i class="fas fa-camera fa-2x"> i> i class="fas fa-camera fa-3x"> i> i class="fas fa-camera fa-5x"> i> i class="fas fa-camera fa-7x"> i> i class="fas fa-camera fa-10x"> i> div> body> html>

Класс	Величина
fa-xs	.75em
fa-sm	.875em
fa-lg	1.33em
fa-2x	2em
fa-3x	3em
fa-4x	4em
fa-5x	5em
fa-6x	6em
fa-7x	7em
fa-8x	8em
fa-9x	9em
fa-10x	10em

Также возможно добавить стиль непосредственно к размеру иконки, устанавливая font-size во внешнем стиле иконки или в стилевом атрибуте HTML элемента, который ссылается на иконку.

Пример

html> html> head> title>Иконки Font Awesome title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> i < color: #8ebf42; > .star < font-size: 2em; > style> head> body> h2>Пример иконок с установленными размерами шрифта и цвета h2> div> p>Иконка с размером по умолчанию. p> i class="fas fa-star"> i> p>Font-size: 2em; p> i class="fas fa-star star"> i> div> body> html>

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

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

Пример

html> html> head> title>Кнопки с иконками title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> button < border: none; border-radius: 5px; color: #ffffff; padding: 10px 14px; font-size: 16px; cursor: pointer; > button:hover < background-color: #666666; box-shadow: 2px 4px #999999; > .btn < background-color: #999999; > .home < background-color: #ff6347; > .menu < background-color: #008080; > .about < background-color: #e6b800; > style> head> body> h2>Кнопки с иконками h2> p>Icon buttons: p> button class="btn"> i class="fa fa-home"> i> button> button class="btn"> i class="fa fa-bars"> i> button> button class="btn"> i class="fas fa-info-circle"> i> button> p>Кнопки с иконками текстов и разными цветами: p> button class="home"> i class="fa fa-home"> i> Home button> button class="menu"> i class="fa fa-bars"> i> Menu button> button class="about"> i class="fas fa-info-circle"> i> About button> body> html>

Добавление эффекта тени к иконкам

Для добавления эффектов тени к иконкам необходимо CSS свойство text-shadow.

Установите тень для того элемента, к которому относится иконка:

Пример

html> html> head> title>Иконки Font Awesome title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> i < color: #1c87c9; text-shadow: 2px 2px 4px #00ffff; font-size: 30px; > style> head> body> h2>Пример иконок с тенью текста h2> div> i class="fas fa-apple-alt"> i> i class="fas fa-car"> i> i class="fas fa-star-half-alt"> i> i class="far fa-smile"> i> i class="fas fa-paw"> i> i class="fas fa-globe-asia"> i> div> body> html>

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

С помощью иконок можно сделать много всего! Можете оформлять ваши HTML списки в виде декоративных маркеров.

и класс fa-li для элемента
, чтобы заменить маркеры по умолчанию в неупорядоченном списке.

Пример

html> html> head> title>Иконки Font Awesome title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> span < color: #8ebf42; > style> head> body> h2>Иконки в примере со списком h2> ul class="fa-ul"> li> span class="fa-li"> i class="fas fa-check-double"> i> span>Элемент списка 1 li> li> span class="fa-li"> i class="fas fa-check-circle"> i> span>List item 2 li> li> span class="fa-li"> i class="fas fa-check-square"> i> span>Элемент списка 3 li> li> span class="fa-li"> i class="fas fa-tasks"> i> span>Элемент списка 4 li> ul> body> html>

Анимация иконок Font Awesome

Используйте класс fa-spin для плавного вращения иконки и класс fa-pulse fa-spinner .

Будет выглядеть таким образом:

i fa-spinner fa-spin">i>

Смотрите пример, чтобы увидеть разницу между классами fa-spin и fa-pulse :

Пример

html> html> head> title>Иконки Font Awesome title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> i < color: #1c87c9; text-shadow: 2px 2px 4px #00ffff; font-size: 30px; > style> head> body> h2>Иконки с классами fa-spin и fa-pulse h2> p>Spinner spin: p> i class="fas fa-spinner fa-spin"> i> p>Spinner pulse: p> i class="fas fa-spinner fa-pulse"> i> body> html>

Пример с несколькими анимированными иконками:

Пример

html> html> head> title>Иконки Font Awesome title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> i < color: #1c87c9; text-shadow: 2px 2px 4px #00ffff; font-size: 30px; > style> head> body> h2>Анимированные иконки h2> i class="fas fa-spinner fa-pulse"> i> i class="fas fa-star fa-spin"> i> i class="fas fa-sync fa-spin"> i> i class="fas fa-haykal fa-spin"> i> i class="fas fa-stroopwafel fa-pulse"> i> i class="fas fa-car fa-spin"> i> body> html>

Поворот иконок Font Awesome

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

Для произвольного поворота и отражения иконок используйте классы fa-rotate-* и fa-flip-* .

Пример

html> html> head> title>Иконки Font Awesome title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> i < color: #1c87c9; text-shadow: 2px 2px 4px #00ffff; font-size: 30px; > style> head> body> h2>Поворот иконок h2> i class="fas fa-star-half-alt"> i> i class="fas fa-star-half-alt fa-rotate-90"> i> i class="fas fa-star-half-alt fa-rotate-180"> i> i class="fas fa-star-half-alt fa-rotate-270"> i> i class="fas fa-star-half-alt fa-flip-horizontal"> i> i class="fas fa-star-half-alt fa-flip-vertical"> i> i class="fas fa-star-half-alt fa-flip-both"> i> body> html>

Смотрите градус и детали вращения:

Класс	Градус и детали вращения
fa-rotate-90	90°
fa-rotate-180	180°
fa-rotate-270	270°
fa-flip-horizontal	Отражает иконку по горизонтали.
fa-flip-vertical	Отражает иконку по вертикали.
fa-flip-both	Отражает иконку по вертикали и горизонтали (требуется версия 5.7.0 или выше).

Начало работы

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

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

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

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

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

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

Автоподдержка доступности

CDN Font Awesome поможет вам автоматизировать поддержку доступности ваших иконок для всех посетителей. Узнайте подробнее о лучших практиках доступности.

Асинхронная загрузка

Хотите ускорить загрузку вашего сайта? И мы тоже. Ваши иконки будут загружаться в фоновом режиме, что даст невероятную скорость вашему сайту.

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

Хотите управлять и размещать файлы Font Awesome сами? Вы можете скачать, кастомизировать и использовать иконки с вашими настройками. В наборе файлов Font Awesome есть как и простой CSS-файл, так и файлы препроцессоров: Sass и Less.

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

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

 rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> 

Использование 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"; 

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

Less Ruby Gem

Используйте официальный Font Awesome LESS Ruby Gem для легкого внедрения Font Awesome LESS в Rails-проект. Занимается поддержкой:@supercodepoet.

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

gem 'font-awesome-less' 

$ bundle 

$ gem install font-awesome-less 

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

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

Sass Ruby Gem

Используйте официальный Ruby Gem Font Awesome SASS для легкого подключения Font Awesome SASS в ваш Rails- или Compass-проект. Занимается поддержкой: @supercodepoet.

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

gem 'font-awesome-sass' 

$ bundle 

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

Необходима поддержка IE7 ?

Если вам нужна поддержка IE7 , то примите мои соболезнования. Ну правда. Font Awesome 4.7.0 не поддерживает IE7и версии ниже. Вам необходимо прочитать инструкции по FA 3.2.1 для использования в IE7. Затем можете пойти и пожаловаться тому, кто потребовал поддержку IE7 .

Решение ошибок

Если у вас возникли проблемы в работе с Font Awesome, то можете поискать решение на wiki -странице по частым ошибкам. Занимается поддержкой: @gtagliala.

Как задать свой размер иконок FontAwesome?

Подключил на сайт шрифт FontAwesome
Но не могу задать свой размер иконки. Они предлагают добавлять классы ( fa-2x, fa-3x, fa-4x, fa-5x ), но это не совсем подходит. Мне нужен определенный размер. Когда я в CSS пишу font-size: 30px; то это не помогает.
Как решить задачу?

• Вопрос задан более трёх лет назад
• 8850 просмотров

Комментировать

Решения вопроса 1

TODO: Написать статус

Так что достаточно просто правильно указать font-size .

Ответ написан более трёх лет назад

Примеры

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

The following examples are kept simple and assume use of Font Awesome CDN, which provides auto-accessibility support. If you are not using the Font Awesome CDN, please see the manual accessibility examples and read more about making your icons more awesome for all users

Базовые иконки

Пример: Базовые иконки fa-camera-retro

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

 class="fa fa-camera-retro"> fa-camera-retro 

• Пример: Базовые иконки Если вы меняете значение свойства font-size у контейнера иконок, то иконки станут больше. Такое поведение происходит и с цветом, тенью и другими свойствами, которые могут наследоваться.

Увеличенные иконки

Для увеличения размеров иконок в родительском элементе используйте классы fa-lg (увеличение на 33%), fa-2x , fa-3x , fa-4x , или fa-5x .

 class="fa fa-camera-retro fa-lg"> fa-lg  class="fa fa-camera-retro fa-2x"> fa-2x  class="fa fa-camera-retro fa-3x"> fa-3x  class="fa fa-camera-retro fa-4x"> fa-4x  class="fa fa-camera-retro fa-5x"> fa-5x 

• Если ваши иконки обрезаны сверху и снизу, то удостоверьтесь в правильном значении свойства line-height.

Иконки с фиксированной шириной

Используйте класс fa-fw для того, чтобы задать фиксированную ширину иконкам. Прекрасно подходит для тех случаев, когда различная ширина иконок мешает правильному выравниванию. Особенно полезно при использовании иконок в навигации и списках групп.

 class="list-group">  class="list-group-item" href="#"> class="fa fa-home fa-fw" aria-hidden="true">  Главная  class="list-group-item" href="#"> class="fa fa-book fa-fw" aria-hidden="true">  Библиотека  class="list-group-item" href="#"> class="fa fa-pencil fa-fw" aria-hidden="true">  Приложения  class="list-group-item" href="#"> class="fa fa-cog fa-fw" aria-hidden="true">  Настройки  

Иконки списков

• Иконки списков
• могут быть использованы
• как маркеры
• в списках

Используйте классы fa-ul и fa-li для быстрого удаления стандартных маркеров в ненумерованных списках.

Обрамленные и вынесенные иконки

…Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца… Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я.

Используйте классы fa-border и fa-pull-right или fa-pull-left для выделения цитаты или подключения иконки статьи.

 class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"> . Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. 

Анимированные иконки

Пример загрузки (с fa-spinner icon) Пример загрузки (с fa-circle-o-notch icon) Пример загрузки (с fa-refresh icon) Пример загрузки (с fa-cog icon) Пример загрузки (с fa-spinner icon)

Используйте класс fa-spin , чтобы заставить вращаться любую иконку, и используйте класс fa-pulse , чтобы заставить вращаться иконку по 8 шагов. Также работает с классами fa-spinner , fa-refresh , и fa-cog .

 class="fa fa-spinner fa-spin fa-3x fa-fw">  class="sr-only">Загрузка.  class="fa fa-circle-o-notch fa-spin fa-3x fa-fw">  class="sr-only">Загрузка.  class="fa fa-refresh fa-spin fa-3x fa-fw">  class="sr-only">Загрузка.  class="fa fa-cog fa-spin fa-3x fa-fw">  class="sr-only">Загрузка.  class="fa fa-spinner fa-pulse fa-3x fa-fw">  class="sr-only">Загрузка. 

На заметку: Некоторые браузера на нескольких платформах имеют проблемы с анимацией иконок, что дает эффект «безудержного веселья» у иконки. Читайте проблему #671 для ознакомления с ней и изучения возможных решений.

На заметку: Анимация CSS3 не поддерживается в IE8 — IE9.

Повернутые и отзеркаленные иконки

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

Чтобы произвольно поворачивать и зеркалить иконки, используйте классы fa-rotate-* and fa-flip-* .

 class="fa fa-shield"> normal  class="fa fa-shield fa-rotate-90"> fa-rotate-90  class="fa fa-shield fa-rotate-180"> fa-rotate-180  class="fa fa-shield fa-rotate-270"> fa-rotate-270  class="fa fa-shield fa-flip-horizontal"> fa-flip-horizontal  class="fa fa-shield fa-flip-vertical"> fa-flip-vertical 

Групповые иконки

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban на fa-camera

Чтобы сделать группу из иконок, используйте класс fa-stack для родителя, класс fa-stack-1x используйте для задания стандартного размера иконки, а класс fa-stack-2x для увеличенного. Класс fa-inverse может быть использован для присваивания альтернативного цвета иконке. Также вы можете использовать классы увеличения для управления размерами иконок.

 class="fa-stack fa-lg">  class="fa fa-square-o fa-stack-2x">  class="fa fa-twitter fa-stack-1x">  fa-twitter на fa-square-o  class="fa-stack fa-lg">  class="fa fa-circle fa-stack-2x">  class="fa fa-flag fa-stack-1x fa-inverse">  fa-flag на fa-circle  class="fa-stack fa-lg">  class="fa fa-square fa-stack-2x">  class="fa fa-terminal fa-stack-1x fa-inverse">  fa-terminal на fa-square  class="fa-stack fa-lg">  class="fa fa-camera fa-stack-1x">  class="fa fa-ban fa-stack-2x text-danger">  fa-ban на fa-camera 

Примеры для Bootstrap 3

• Редактировать
• Удалить
• Забанить
• Дать права администратора

Font Awesome прекрасно работает со всеми компонентами Bootstrap.

Пользовательский CSS

Всё, что вы можете сделать со шрифтами с помощью CSS, вы сможете сделать и с Font Awesome.

Пример рейтинга (позаимствовано из CSS Tricks)

Общедоступность

Обновление. Сохранение. Держитесь крепче!

Уровень заряда: 50%

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

 class="btn btn-default" href="path/to/settings" aria-label="Настройки">  class="fa fa-cog" aria-hidden="true">   class="btn btn-danger" href="path/to/settings" aria-label="Удалить">  class="fa fa-trash-o" aria-hidden="true">   class="btn btn-primary" href="#navigation-main" aria-label="Перейти к основному меню">  class="fa fa-bars" aria-hidden="true">  

 class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true">  class="sr-only">Обновление.  class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true">  class="sr-only">Сохранение. Держитесь крепче! 

 class="input-group margin-bottom-sm">  class="input-group-addon"> class="fa fa-envelope-o fa-fw" aria-hidden="true">  class="form-control" type="text" placeholder="Ваш email">   class="input-group">  class="input-group-addon"> class="fa fa-key fa-fw" aria-hidden="true">  class="form-control" type="password" placeholder="Пароль">  

 href="path/to/shopping/cart" class="btn btn-primary" aria-label="Посмотреть 3 предмета в вашей корзине">  class="fa fa-shopping-cart" aria-hidden="true">  

 class="fa fa-battery-half" aria-hidden="true">  class="sr-only">Уровень заряда: 50% 

Font Awesome 4.7.0 ·
Создано Дейвом Ганди (Dave Gandy) ·
Перевод на русский язык Дима Калдузов

Font Awesome предоставляется по лицензии SIL OFL 1.1 ·
Разработка предоставляется по лицензии MIT License ·
Документация предоставляется по лицензии CC BY 3.0