Font awesome что это

Font Awesome

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

Преимущества

• Все иконки векторные и масштабируются в самых широких пределах, без ухудшения их качества.
• Поскольку иконка представляет собой текстовый символ, то к нему применяются любые стилевые свойства, доступные для шрифтов — допустимо изменять цвет, фон, добавлять тень и т. д.
• Иконки хорошо работают во всех браузерах, включая старый IE8.
• Иконки прекрасно сочетаются с различными фреймворками вроде Bootstrap.
• Font Awesome включает не только шрифт, но и стилевой файл, в котором уже прописано несколько типовых решений, вроде размеров иконок, поворота, выравнивания, добавления рамки и др. Достаточно только подключить стиль и назначить элементу нужный класс.
• Иконки можно поворачивать, анимировать и комбинировать между собой, накладывая одну иконку поверх другой. Это ещё больше расширяет возможное количество вариантов.
• Шрифт свободен для коммерческого использования.

Недостатки

• Символы могут быть только одного цвета. Это ограничение частично обходится объединением иконок разного цвета друг с другом, а также с помощью эффектов CSS.
• Font Awesome как и большинство универсальных библиотек слишком избыточна, поэтому ради десятка используемых на сайте иконок придётся подключать несколько сотен. В этом случае помогает собственная сборка, когда вы включаете в шрифт только те иконки, которые вам действительно нужны.

• Установка
• Работа с иконками
• Работа с Bootstrap
• Сборка иконок

Иконочные шрифты, альтернативы FontAwesome

Что такое «Иконочный шрифт» — это обычный шрифт, но вместо букв и цифр в нем отображаются различные пиктограммы и символы. В последние годы такие шрифты активно используют в веб-дизайне, в качестве иконок для сайта. С их помощью можно улучшить юзабилити сайта, упростить восприятие информации. Еще из плюсов использования иконочных шрифтов по сравнению с иконками-картинками:

• Возможность масштабирования без потери качества
• Беспроблемная поддержка в большинстве браузеров
• Возможность стилизации, работа как с обычным текстом
• Небольшой вес
• Всего за один запрос на сервер загружаются все необходимые иконки

Кроме использования для сайтов, такие шрифты можно установить и в свою ОС и использовать в программах, например в Фотошопе.

Самый популярный иконочный шрифт FontAwesome https://fontawesome.com/, но поскольку информации о нем и так полно, мы лучше рассмотрим альтернативные шрифты.

StackIcons (http://stackicons.com/)

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

Шрифт поставляется с CSS, поэтому у вас есть возможность его кастомизации. Иконки шрифта можно использовать без фона или с фоном сделав из квадратными, с закругленными концами и просто круглыми.

Вы можете использовать цветные иконки, которые повторяют реальные цвета бренда.

Лицензия: SIL Open Font and MIT

Twemoji Awesome (http://ellekasai.github.io/twemoji-awesome/)

Twemoji — это open source проект смайликов от Twitter. Канадский дизайнер Elle Kasai создала на его основе иконочный штифт Twemoji Awesome.

Все имена классов для отображения иконок такие же, как в шпаргалке по Twemoji (https://www.webfx.com/tools/emoji-cheat-sheet/), но вам нужно использовать тире (-) вместо подчеркивания (_), вот и все.

Лицензия: MIT and CC-BY for the Emoticon graphics

Octicons (https://octicons.github.com/)

Octicons — это иконочный шрифт от GitHub. Он позволит использовать в вашем проекте те же иконки, что и на GitHub. Доступно более 170 иконок.

Android Icons (https://www.androidicons.com/)

Этот шрифт включает в себя 250 иконок в 5 различных размерах и 14 цветах.

Лицензия: Attribution-ShareAlike 4.0 International

DevIcons (http://vorillaz.github.io/devicons/#/main)

DevIcons — это иконочный шрифт разработанный Теодором Ворильясом. Он содержит 85 символов и логотипов знакомых приложений для разработки, таких как GitHub, Laravel, Django, Visual Studio и многих других.

Material Design Iconic Font (http://zavoloklom.github.io/material-design-iconic-font/)

В этом шрифте содержится множество иконок, вдохновленных дизайном Google Material и сгруппированных в 15 различных категорий. Чтобы использовать их, нужно просто подключить файл шрифта Material-Design-Iconic-Font.ttf к сайту, а потом используя эту шпаргалку добавить иконки на сайт. Так же можно изменять размеры, цвета и вообще работать с ними как с обычным шрифтом с помощью CSS.

Лицензия: Attribution-ShareAlike 4.0 International

Категории

Свежие записи

• Таблицы в админке WordPress (часть 1)
• Импорт/экспорт Linux WSL
• Не печатаются заглавные буквы в PowerShell
• 1С-Битрикс: Ошибка авторизации! Срок действия пароля истек, необходимо сменить пароль.
• Несколько конфигураций для проекта Django
• Django inclusion_tag с разными шаблонами

Как подключить Font Awesome в HTML и CSS

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

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

Шрифт «Font Awesome» – это набор иконок, который используется для веб-разработки и создания интерфейсов. В него входит более 26 000 векторных иконок, которые можно легко встраивать в веб-страницы и приложения, используя CSS-классы.

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

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

Преимущества шрифта Font Awesome

• Это действительно шрифт. Существуют и другие способы отображения значков и иконок. Например, можно использовать отдельные изображения или CSS-спрайты. Однако Awesome к ним не относится, так как это самый настоящий шрифт, который помогает улучшить панель поиска, навигацию и любое другое место, где уместны иконки, логотипы или символы .
• Его легко адаптировать и стилизовать. Использование этого шрифта позволяет сделать иконки настолько четкими, насколько позволяет ваше устройство. Благодаря этому не нужно беспокоиться о подготовке графики к Retina-дисплеям, поскольку Font Awesome в любом случае предоставит вам высокое качество значков. В век адаптивного дизайна это важно как никогда прежде.

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

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

Виртуальный хостинг

Если у вас ещё нет подходящего хостинга для вашего сайта, обратите внимание на виртуальный SSD хостинг RU-CENTER. Он поддерживает PHP , MySQL и подходит для сайтов любой сложности.

Приобретя эту услугу у нас, вы также получите доступ к последним версиям самых популярных систем управления контентом: WordPress, Joomla, 1С–Битрикс, Drupal, ModX, OpenCart.

Независимо от того, является ли ваш проект личным блогом или высоконагруженным корпоративным ресурсом, хостинг RU-CENTER предоставит вам всё необходимое для его поддержки.

Как установить шрифт Awesome

Есть два варианта того, как можно его получить:

Способ 1. Через официальный сайт

Перейдите на официальный сайт Font Awesome, где вы можете скачать архив с библиотекой Font Awesome.

Как правило, бесплатной версии (Free) достаточно, но вы также можете рассмотреть платные варианты (Pro) с дополнительными иконками и функциональностью.

Затем выполните распаковку архива и скопируйте содержимое папок «/css» и «/webfonts» в свою веб-директорию (например, в папку /css/awesome).

После этого добавьте следующую строку в тег вашего сайта, чтобы подключить стили Awesome:

Способ 2. CDN Font Awesome

Подключите Font Awesome с помощью CDN (Content Delivery Network). Это самый простой способ, и он не требует загрузки и установки файлов на вашем сервере.

Для этого просто вставьте следующий код в ваш HTML-файл:

Важно! URL может меняться в зависимости от выбранной вами версии Font Awesome. Наш код подходит для последней доступной версии 6.4.4.

У такого подхода есть несколько плюсов:

+ Сайт будет работать быстрее благодаря параллельной загрузке данных с разных серверов – сайт будет загружаться с вашего хостинга, а шрифты – из сети Awesome.

+ Кроме того, если вы уже посещали сайты со шрифтом Awesome, он уже есть в кэше вашего браузера.

Однако у этого метода есть и свои недостатки:

– Он не подходит для автономных сайтов (без доступа к интернету).

– Создает зависимость от CDN сети Awesome.

Поэтому первый способ считается более универсальным и предпочтительным. Но выбор остается за вами.

Какую версию Font Awesome лучше выбрать

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

Кроме того, на этой же странице можно выбрать Font Awesome 5, у которого еще больше версий – вплоть до 5.15.4.

На сентябрь 2023 года последний доступный релиз – это 6.4.2.

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

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

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

Библиотека иконок Font Awesome: где найти

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

Чтобы найти конкретную иконку, воспользуйтесь поиском по названию или ключевым словам.

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

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

1. С помощью HTML-тега

Вставьте тег с классом, который соответствует нужной иконке. Например, если вы хотите использовать иконку «сердце», используйте следующий код:

Что здесь происходит?

• «fas» указывает на стиль иконки – Solid, то есть «сплошной».
• Для отображения иконки нужен класс «fa».
• «fa-heart» – это и есть иконка «сердца».

1. С помощью тегов , ,

Иконки Font Awesome могут быть использованы не только с , но и с другими HTML-тегами: , , и другими. Они обеспечивают большую гибкость при размещении иконок на вашем сайте и позволяют легко стилизовать их.

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

Этот код создаст иконку звезды и поместит её внутрь элемента . Если нужно, вы можете добавить дополнительные классы или стили к этому , чтобы изменить его внешний вид или расположение.

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

Этот код поместит иконку «облака» внутрь элемента . Как и в предыдущем случае, вы можете применить дополнительные стили к , чтобы настроить его.

С помощью тега можно создать интерактивную кнопку на веб-странице. Он позволяет пользователям выполнять различные действия, например, отправлять формы, переходить по ссылкам и многое другое.

Здесь содержит иконку поиска и текст «Поиск». Пользователь может нажать эту кнопку, чтобы начать поиск чего бы то ни было.

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

Это – лучший способ начать день!

Когда браузер обработает этот HTML-код, он заменит иконкой чашки кофе в тексте. Таким образом, вы получите следующий результат:

Настройка размеров иконок Font Awesome с помощью классов – это удобный способ адаптировать иконки под дизайн вашего веб-сайта.

Для изменения размера иконок вы можете использовать классы, которые начинаются с fa- и затем указать размер:

• fa-xs – уменьшает размер иконки до минимального.
• fa-sm – устанавливает маленький размер иконки.
• fa-lg – устанавливает большой размер иконки.
• fa-2x, fa-3x и так далее – указывают конкретный множитель размера. Соответственно, «fa-2x» удвоит размер иконки, а «fa-3x» утроит его.

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

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

Изменение цвета иконок

Для изменения цвета иконок вы можете использовать стили CSS, добавив атрибут «style» к элементу и указав цвет с помощью свойства «color».

В первом коде для иконки звезды задается золотой цвет, а во втором – белый для иконки облака.

Вы можете использовать любой доступный в CSS цвет, тут вы не ограничены в выборе.

Изменение отступов

Чтобы установить отступ для иконки Font Awesome, вы можете использовать свойство «margin» в CSS.

• margin-top – отступ сверху;
• margin-bottom – отступ снизу;
• margin-left – отступ слева;
• margin-right – отступ справа.

Этот код устанавливает отступ справа от иконки в десять пикселей.

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

В этом примере иконка почтового конверта (fa-envelope) помещена внутрь вместе с текстовой отметкой () – «Написать письмо». Вы можете применить любые стили к контейнеру или элементам внутри него.

Если вы хотите настроить стили иконок, вы можете добавить дополнительные классы или стили CSS к элементам с иконками.

Этим кодом мы установили цвет («red») и размер иконки пользователя («24px»).

Таким образом, мы подключили и настроили Font Awesome на вашем веб-сайте.

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

Шрифт Awesome

Шрифт Awesome — это коллекция масштабируемых векторных иконок. Иконки можно форматировать с помощью css-свойств, устанавливать для них цвет, размер, тень и многое другое. Шрифт версии 4.5.0 включает 605 иконок.

• Содержание:
• 1. Как установить шрифт Awesome
• 2. Как использовать иконки Font Awesome
• 3.1. Иконки для веб-приложений
• 3.2. Иконки гаджетов
• 3.3. Иконки рука
• 3.4. Иконки транспорт
• 3.5. Гендерные иконки
• 3.6. Файловые иконки
• 3.7. Иконки валюты
• 3.8. Иконки управляющих символов
• 3.9. Иконки платежных систем
• 3.10. Иконки социальных сетей и сообществ
• 3.11. Иконки редактирования текста
• 3.12. Иконки направления
• 3.13. Иконки видео плеера
• 3.14. Брендовые иконки
• 3.15. Иконки диаграмм
• 3.16. Вращающиеся иконки
• 4. Похожие ресурсы

1. Как установить шрифт Awesome

Способ 1.

Использовать версию файла font-awesome.css , размещенную на ресурсе CDNJS. Для этого нужно добавить следующий код в раздел :

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

Способ 2.

Скачать шрифт с сайта Font Awesome. Распаковать архив и закачать на сервер сайта две папки из архива — css и fonts . Если у вас на сайте уже есть папки с такими названиями, то нужно просто добавить в них файлы из скачанных папок.

Вы можете использовать полную или минимизированную версию файла:

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

Иконки можно добавить на веб-страницу двумя способами: задать соответствующие классы для элементов и или добавить к нужному элементу с помощью псевдоэлементов :before , :after и соответствующего значения свойства content .

li:before < content: "\f015"; /* добавляем иконку дом */ font-family: FontAwesome; color: #aaaaaa; margin-right: 10px; >

1. Стандартные иконки

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

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

2. Большие иконки

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

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

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

4. Иконки для маркированного списка

• элемент списка
• элемент списка
• элемент списка

5. Иконки в рамке и кавычки

Воспользуйтесь классом fa-border , чтобы установить рамку для иконки. Классы pull-right и pull-left добавят кавычки для текста.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien.

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien.

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

Добавьте классы fa-spin , fa-pulse , fa-spinner , fa-refresh или fa-cog , чтобы установить вращающиеся иконки. Анимация не поддерживается в IE8 — IE9.

7. Трансформированные иконки

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

8. Комбинированные иконки

Можно комбинировать иконки, накладывая одну на другую. Используйте класс fa-stack для родительской иконки, класс fa-stack-1x — для стандартного размера и fa-stack-2x для увеличенного размера.

3. Коллекция Font Awesome 4.5.0, классы и css-код для вставки с помощью свойства content

3.1. Иконки для веб-приложений

fa-adjust \f042
fa-anchor \f13d
fa-archive \f187
fa-arrows \f047
fa-asterisk \f069
fa-at \f1fa
fa-balance-scale \f24e
fa-ban \f05e
fa-bank \f19c
fa-barcode \f02a
fa-battery-empty \f244
fa-battery-half \f242
fa-battery-quarter \f243
fa-battery-three-quarters \f241
fa-battery-full \f240
fa-bed \f236
fa-beer \f0fc
fa-bell \f0f3
fa-bell-o \f0a2
fa-bell-slash \f1f6
fa-bell-slash-o \f1f7
fa-binoculars \f1e5
fa-birthday-cake \f1fd
fa-bolt \f0e7
fa-bomb \f1e2
fa-book \f02d
fa-bookmark \f02e
fa-bookmark-o \f097
fa-briefcase \f0b1
fa-bug \f188
fa-building \f1ad
fa-building-o \f0f7
fa-bullhorn \f0a1
fa-bullseye \f140
fa-calculator \f1ec
fa-calendar \f073
fa-calendar-check-o \f274
fa-calendar-minus-o \f272
fa-calendar-o \f133
fa-calendar-plus-o \f271
fa-calendar-times-o \f273
fa-cart-plus \f217
fa-cc \f20a
fa-certificate \f0a3
fa-clock-o \f017
fa-clone \f24d
fa-close \f00d
fa-cloud \f0c2
fa-cloud-download \f0ed
fa-cloud-upload \f0ee
fa-code \f121
fa-code-fork \f126
fa-coffee \f0f4
fa-comment \f075
fa-comment-o \f0e5
fa-commenting \f27a
fa-commenting-o \f27b
fa-comments \f086
fa-comments-o \f0e6
fa-compass \f14e
fa-copyright \f1f9
fa-creative-commons \f25e
fa-crop \f125
fa-crosshairs \f05b
fa-cube \f1b2
fa-cubes \f1b3
fa-cutlery \f0f5
fa-dashboard \f0e4
fa-database \f1c0
fa-desktop \f108
fa-diamond \f219
fa-download \f019
fa-edit \f044
fa-ellipsis-h \f141
fa-ellipsis-v \f142
fa-envelope \f0e0
fa-envelope-o \f003
fa-envelope-square \f199
fa-exclamation \f12a
fa-exclamation-circle \f06a
fa-exclamation-triangle \f071
fa-external-link \f08e
fa-external-link-square \f14c
fa-eye \f06e
fa-eye-slash \f070
fa-eyedropper \f1fb
fa-fax \f1ac
fa-film \f008
fa-filter \f0b0
fa-fire \f06d
fa-fire-extinguisher \f134
fa-flag \f024
fa-flag-checkered \f11e
fa-flag-o \f11d
fa-flash \f0e7
fa-flask \f0c3
fa-frown-o \f119
fa-futbol-o \f1e3
fa-gear \f013
fa-gears \f085
fa-gift \f06b
fa-glass \f000
fa-globe \f0ac
fa-graduation-cap \f19d
fa-group \f0c0
fa-hashtag \f292
fa-heart \f004
fa-heart-o \f08a
fa-heartbeat \f21e
fa-h-square \f0fd
fa-history \f1da
fa-home \f015
fa-hospital-o \f0f8
fa-hourglass \f254
fa-hourglass-start \f251
fa-hourglass-half \f252
fa-hourglass-end \f253
fa-hourglass-o \f250
fa-i-cursor \f246
fa-inbox \f01c
fa-industry \f275
fa-info \f129
fa-info-circle \f05a
fa-key \f084
fa-language \f1ab
fa-leaf \f06c
fa-legal \f0e3
fa-lemon-o \f094
fa-lightbulb-o \f0eb
fa-location-arrow \f124
fa-lock \f023
fa-magic \f0d0
fa-magnet \f076
fa-map \f279
fa-map-marker \f041
fa-map-o \f278
fa-map-pin \f276
fa-map-signs \f277
fa-medkit \f0fa
fa-meh-o \f11a
fa-microphone \f130
fa-microphone-slash \f131
fa-moon-o \f186
fa-mouse-pointer \f245
fa-music \f001
fa-navicon \f0c9
fa-newspaper-o \f1ea
fa-object-group \f247
fa-object-ungroup \f248
fa-paint-brush \f1fc
fa-paper-plane \f1d8
fa-paper-plane-o \f1d9
fa-paw \f1b0
fa-pencil \f040
fa-pencil-square \f14b
fa-pencil-square-o \f044
fa-percent \f295
fa-phone \f095
fa-phone-square \f098
fa-plug \f1e6
fa-power-off \xf011
fa-print \f02f
fa-puzzle-piece \f12e
fa-qrcode \f029
fa-question \f128
fa-question-circle \f059
fa-quote-left \f10d
fa-quote-right \f10e
fa-recycle \f1b8
fa-refresh \f021
fa-registered \f25d
fa-reply \f112
fa-reply-all \f122
fa-retweet \f079
fa-road \f018
fa-rss \f09e
fa-rss-square \f143
fa-search \f002
fa-search-minus \f010
fa-search-plus \f00e
fa-send \f1d8
fa-send-o \f1d9
fa-server \f233
fa-share \f064
fa-share-square \f14d
fa-share-square-o \f045
fa-shield \f132
fa-shopping-bag \f290
fa-shopping-basket \f291
fa-shopping-cart \f07a
fa-sign-in \f090
fa-sign-out \f08b
fa-signal \f012
fa-sitemap \f0e8
fa-sliders \xf1de
fa-smile-o \xf118
fa-soccer-ball-o \f1e3
fa-sort \f0dc
fa-sort-alpha-asc \f15d
fa-sort-alpha-desc \f15e
fa-sort-amount-asc \f160
fa-sort-amount-desc \f161
fa-sort-asc \f0de
fa-sort-desc \f0dd
fa-sort-numeric-asc \f162
fa-sort-numeric-desc \f163
fa-spoon \f1b1
fa-star \f005
fa-star-half \f089
fa-star-half-o \f123
fa-star-o \f006
fa-street-view \f21d
fa-suitcase \f0f2
fa-sun-o \f185
fa-support \f1cd
fa-tachometer \f0e4
fa-tag \f02b
fa-tags \f02c
fa-tasks \f0ae
fa-terminal \f120
fa-thumb-tack \f08d
fa-ticket \f145
fa-tint \f043
fa-trademark \f25c
fa-trash \f1f8
fa-trash-o \f014
fa-tree \f1bb
fa-trophy \f091
fa-tty \f1e4
fa-umbrella \f0e9
fa-unlock \f09c
fa-unlock-alt \f13e
fa-unsorted \f0dc
fa-upload \f093
fa-user \f007
fa-user-plus \xf234
fa-user-secret \f21b
fa-user-times \f235
fa-user-md \f0f0
fa-volume-down \f027
fa-volume-off \f026
fa-volume-up \f028
fa-warning \f071
fa-wifi \f1eb
fa-wrench \f0ad

3.2. Иконки гаджетов

fa-mobile \f10b
fa-tablet \f10a
fa-television \f26c
fa-video-camera \f03d
fa-camera \f030
fa-camera-retro \f083
fa-hdd-o \f0a0
fa-headphones \f025
fa-laptop \f109
fa-gamepad \f11b
fa-keyboard-o \f11c

3.3. Иконки рука

fa-hand-grab-o \f255
fa-hand-lizard-o \f258
fa-hand-paper-o \f256
fa-hand-peace-o \f25b
fa-hand-pointer-o \f25a
fa-hand-scissors-o \f257
fa-hand-spock-o \xf259
fa-hand-o-down \f0a7
fa-hand-o-left \f0a5
fa-hand-o-right \f0a4
fa-hand-o-up \f0a6
fa-thumbs-down \f165
fa-thumbs-o-down \f088
fa-thumbs-o-up \f087
fa-thumbs-up \f164

3.4. Иконки транспорт

fa-ambulance \f0f9
fa-bicycle \f206
fa-bus \f207
fa-car \f1b9
fa-fighter-jet \f0fb
fa-motorcycle \f21c
fa-plane \f072
fa-rocket \f135
fa-ship \f21a
fa-space-shuttle \f197
fa-subway \f239
fa-taxi \f1ba
fa-train \f238
fa-truck \f0d1
fa-wheelchair \f193

3.5. Гендерные иконки

fa-child \f1ae
fa-female \f182
fa-male \f183
fa-genderless \f1db
fa-transgender \f224
fa-transgender-alt \f225
fa-mars \f222
fa-mars-double \f227
fa-mars-stroke \f229
fa-mars-stroke-h \f22b
fa-mars-stroke-v \f22a
fa-mercury \f223
fa-neuter \f22c
fa-venus \f221
fa-venus-double \f226
fa-venus-mars \f228

3.6. Файловые иконки

fa-folder \f07b
fa-folder-o \f114
fa-folder-open \f07c
fa-folder-open-o \f115
fa-file \f15b
fa-file-o \f016
fa-file-archive-o \f1c6
fa-file-audio-o \f1c7
fa-file-code-o \f1c9
fa-file-excel-o \f1c3
fa-file-image-o \f1c5
fa-file-movie-o \f1c8
fa-file-pdf-o \f1c1
fa-file-photo-o \xf1c5
fa-file-powerpoint-o \f1c4
fa-file-sound-o \f1c7
fa-file-video-o \f1c8
fa-file-word-o \f1c2
fa-file-zip-o \f1c6
fa-file-text \f15c
fa-file-text-o \f0f6
fa-files-o \f0c5
fa-image \f03e
fa-sticky-note \f249
fa-sticky-note-o \f24a

3.7. Иконки валюты

fa-btc \f15a
fa-dollar \f155
fa-euro \f153
fa-gbp \f154
fa-yen \f157
fa-money \f0d6
fa-ruble \f158
fa-rupee \f156
fa-shekel \f20b
fa-turkish-lira \f195
fa-won \f159

3.8. Иконки управляющих символов

fa-check \f00c
fa-check-circle \f058
fa-check-circle-o \f05d
fa-circle-thin \f1db
fa-check-square \f14a
fa-check-square-o \f046
fa-circle \f111
fa-circle-o \f10c
fa-dot-circle-o \f192
fa-minus-square \f146
fa-minus-square-o \f147
fa-plus-square \f0fe
fa-plus-square-o \f196
fa-minus \f068
fa-minus-circle \f056
fa-square \f0c8
fa-square-o \f096
fa-plus \f067
fa-plus-circle \f055
fa-times-circle \f057
fa-times-circle-o \f05c

3.9. Иконки платежных систем

fa-cc-amex \f1f3
fa-cc-diners-club \f24c
fa-cc-discover \f1f2
fa-cc-jcb \f24b
fa-cc-mastercard \f1f1
fa-cc-paypal \f1f4
fa-cc-stripe \f1f5
fa-cc-visa \f1f0
fa-credit-card \f09d
fa-credit-card-alt \f283
fa-google-wallet \f1ee
fa-paypal \f1ed

3.10. Иконки социальных сетей и сообществ

fa-codepen \f1cb
fa-behance \f1b4
fa-behance-square \f1b5
fa-deviantart \f1bd
fa-digg \f1a6
fa-dribbble \f17d
fa-facebook \f09a
fa-facebook-official \f230
fa-facebook-square \f082
fa-google-plus \f0d5
fa-google-plus-square \f0d4
fa-jsfiddle \f1cc
fa-flickr \f16e
fa-instagram \f16d
fa-github \f09b
fa-github-alt \f113
fa-github-square \f092
fa-linkedin \f0e1
fa-linkedin-square \f08c
fa-odnoklassniki \f263
fa-odnoklassniki-square \f264
fa-pinterest \f0d2
fa-pinterest-p \f231
fa-pinterest-square \f0d3
fa-stack-overflow \f16c
fa-yelp \f1e9
fa-tumblr \f173
fa-tumblr-square \f174
fa-twitter \f099
fa-twitter-square \f081
fa-vk \f189

3.11. Иконки редактирования текста

fa-align-center \f037
fa-align-justify \f039
fa-align-left \f036
fa-align-right \f038
fa-bold \f032
fa-chain \f0c1
fa-chain-broken \f127
fa-clipboard \f0ea
fa-columns \f0db
fa-copy \f0c5
fa-cut \f0c4
fa-dedent \f03b
fa-eraser \f12d
fa-floppy-o \f0c7
fa-font \f031
fa-header \f1dc
fa-indent \f03c
fa-italic \f033
fa-list \f03a
fa-list-alt \f022
fa-list-ol \f0cb
fa-list-ul \f0ca
fa-outdent \f03b
fa-paperclip \f0c6
fa-paragraph \f1dd
fa-paste \f0ea
fa-repeat \f01e
fa-rotate-left \f0e2
fa-rotate-right \f01e
fa-save \f0c7
fa-strikethrough \f0cc
fa-subscript \f12c
fa-superscript \f12b
fa-table \f0ce
fa-text-height \f034
fa-text-width \f035
fa-th \f00a
fa-th-large \f009
fa-th-list \f00b
fa-underline \f0cd

3.12. Иконки направления

fa-level-down \f149
fa-level-up \f148
fa-angle-double-down \f103
fa-angle-double-left \f100
fa-angle-double-right \f101
fa-angle-double-up \f102
fa-angle-down \f107
fa-angle-left \f104
fa-angle-right \f105
fa-angle-up \f106
fa-arrow-circle-down \f0ab
fa-arrow-circle-left \f0a8
fa-arrow-circle-right \f0a9
fa-arrow-circle-up \f0aa
fa-arrow-circle-o-down \f01a
fa-arrow-circle-o-left \f190
fa-arrow-circle-o-right \f18e
fa-arrow-circle-o-up \f01b
fa-arrow-down \f063
fa-arrow-left \f060
fa-arrow-right \f061
fa-arrow-up \f062
fa-arrows-h \f07e
fa-arrows-v \f07d
fa-caret-down \f0d7
fa-caret-left \f0d9
fa-caret-right \f0da
fa-caret-up \f0d8
fa-caret-square-o-down \f150
fa-caret-square-o-left \f191
fa-caret-square-o-right \f152
fa-caret-square-o-up \f151
fa-cart-arrow-down \f218
fa-chevron-circle-down \f13a
fa-chevron-circle-left \f137
fa-chevron-circle-right \f138
fa-chevron-circle-up \f139
fa-chevron-down \f078
fa-chevron-left \f053
fa-chevron-right \f054
fa-chevron-up \f077
fa-exchange \f0ec
fa-long-arrow-down \f175
fa-long-arrow-left \f177
fa-long-arrow-right \f178
fa-long-arrow-up \f176
fa-toggle-down \f150
fa-toggle-left \f191
fa-toggle-right \f152
fa-toggle-up \f151
fa-toggle-off \f204
fa-toggle-on \f205

3.13. Иконки видео плеера

fa-arrows-alt \f0b2
fa-backward \f04a
fa-compress \f066
fa-eject \f052
fa-expand \f065
fa-fast-backward \f049
fa-fast-forward \f050
fa-pause \f04c
fa-pause-circle \f28b
fa-pause-circle-o \f28c
fa-play \f04b
fa-play-circle \f144
fa-play-circle-o \f01d
fa-random \f074
fa-step-backward \f048
fa-step-forward \f051
fa-stop \f04d
fa-stop-circle \f28d
fa-stop-circle-o \f28e
fa-youtube-play \f16a

3.14. Брендовые иконки

fa-500px \f26e
fa-adn \f170
fa-amazon \f270
fa-android \f17b
fa-angellist \f209
fa-apple \f179
fa-bitbucket \f171
fa-bitbucket-square \f172
fa-black-tie \f27e
fa-bluetooth \f293
fa-bluetooth-b \f294
fa-buysellads \f20d
fa-chrome \f268
fa-css3 \f13c
fa-connectdevelop \f20e
fa-dashcube \f210
fa-delicious \f1a5
fa-dropbox \f16b
fa-drupal \f1a9
fa-edge \f282
fa-empire \f1d1
fa-expeditedssl \f23e
fa-firefox \f269
fa-fonticons \f280
fa-fort-awesome \f286
fa-forumbee \f211
fa-foursquare \f180
fa-ge \f1d1
fa-get-pocket \f265
fa-git \f1d3
fa-git-square \f1d2
fa-gg \f260
fa-gg-circle \f261
fa-google \f1a0
fa-gratipay \f184
fa-hacker-news \f1d4
fa-houzz \f27c
fa-html5 \f13b
fa-ioxhost \f208
fa-joomla \f1aa
fa-lastfm \f202
fa-lastfm-square \f203
fa-leanpub \f212
fa-linux \f17c
fa-maxcdn \f136
fa-meanpath \f20c
fa-medium \f23a
fa-mixcloud \f289
fa-modx \f285
fa-opencart \f23d
fa-openid \f19b
fa-opera \f26a
fa-optin-monster \f23c
fa-pagelines \f18c
fa-pied-piper \f1a7
fa-pied-piper-alt \f1a8
fa-product-hunt \f288
fa-qq \f1d6
fa-rebel \f1d0
fa-reddit \f1a1
fa-reddit-square \f1a2
fa-renren \f18b
fa-safari \f267
fa-scribd \f28a
fa-sellsy \f213
fa-share-alt \f1e0
fa-share-alt-square \f1e1
fa-shirtsinbulk \f214
fa-simplybuilt \f215
fa-skyatlas \f216
fa-skype \f17e
fa-slack \f198
fa-slideshare \f1e7
fa-soundcloud \f1be
fa-spotify \f1bc
fa-stack-exchange \f18d
fa-steam \f1b6
fa-steam-square \f1b7
fa-stethoscope \f0f1
fa-stumbleupon \f1a4
fa-stumbleupon-circle \f1a3
fa-tencent-weibo \f1d5
fa-trello \f181
fa-tripadvisor \f262
fa-usb \f287
fa-viacoin \f237
fa-vimeo \f27d
fa-vimeo-square \f194
fa-vine \f1ca
fa-wechat \f1d7
fa-weibo \f18a
fa-whatsapp \f232
fa-wikipedia-w \f266
fa-windows \f17a
fa-wordpress \f19a
fa-xing \f168
fa-xing-square \f169
fa-y-combinator \f23b
fa-yahoo \f19e
fa-youtube \f167
fa-youtube-square \f166

3.15. Иконки диаграмм

fa-area-chart \f1fe
fa-bar-chart \f080
fa-line-chart \f201
fa-pie-chart \f200

3.16. Вращающиеся иконки

fa-circle-o-notch \f1ce
fa-cog \f013
fa-gear \f013
fa-spinner \f110

4. Похожие ресурсы

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

1. Fontello

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

2. Foundation Icon

Foundation Icon — еще одна коллекция иконочного шрифта от разработчиков фреймворка Foundation. Помимо стандартных иконок, на сайте представлены круглые иконки, иконки социальных сетей и многое другое.

3. Material icons

Material icons унифицированные плоские иконки от Google, воплотившие в себе простоту восприятия. Иконки оптимизированы для красивого отображения на всех распространенных платформах и для любых разрешений экрана.

Коллекция иконочных шрифтов содержит 750+ иконок. Самый простой способ установить коллекцию на свой сайт — использовать иконки как Google Web Fonts. Для этого в разметку страницы включается следующий код:

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

.material-icons < font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Предпочтительный размер иконок */ display: inline-block; width: 1em; height: 1em; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; /* Поддержка всеми WebKit браузерами */ text-rendering: optimizeLegibility; /* Поддержка Safari и Chrome */ -moz-osx-font-smoothing: grayscale; /* Поддержка Firefox. */ font-feature-settings: 'liga'; /* Поддержка IE. */ >

Сами иконки добавляются с помощью тега лигатура или html-код иконки , например:

account_balance_wallet 

Лигатуру понимают все современные браузеры, IE — начиная с 10 версии. Код иконки генерится автоматически, для этого вам нужно нажать левой кнопкой мыши на рисунок иконки и скопировать предложенный код.

3.1. Размер иконок

Размер иконок контролируется с помощью дополнительных классов:

.material-icons.md-18 /* для */ .material-icons.md-24 /* для */ .material-icons.md-36 /* для */ .material-icons.md-48 /* для */

3.2. Цвет иконок

Цвет иконок также задается с помощью дополнительных классов:

.material-icons.md-dark /* */ .material-icons.md-light /* */ .material-icons.md-dark.md-inactive /* */ .material-icons.md-light.md-inactive /* face */

Чтобы установить пользовательский цвет, нужно добавить класс, определяющий цвет иконки, например:

.material-icons.indigo /* */