Иконки выводятся через псевдокласс ::before, поэтому к любому элементу достаточно добавить класс с именем иконки. Обычно применяется элемент <i>, но можно использовать и любой другой строчный элемент, например: <b>, <span> и др.
Для <i> указывается два основных класса — fa и fa-icon, где вместо icon пишется имя иконки. Все имена доступны на этой странице.
http://fortawesome.github.io/Font-Awesome/icons
Иконки разбиты по категориям, также есть поиск по ключевым словам (рис. 1).
Рис. 1. Иконки для видеоплеера
Чтобы добавить иконку с именем play напишем следующий код:
<i class="fa fa-play"></i>Сам элемент <i> пустой и вставляется в то место на странице, где требуется вывод иконки. Размер её совпадает с размером текущего текста.
Размеры иконок
Размер любой иконки из набора мы можем изменить с помощью свойства font-size, переопределив его в своём стиле. Также Font Awesome предлагает пять готовых размеров. Достаточно добавить дополнительный класс к элементу <i> как показано в примере 1.
Пример 1. Размер иконок
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Font Awesome</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<p><i class="fa fa-rouble"></i> Исходный размер</p>
<p><i class="fa fa-rouble fa-lg"></i> fa-lg</p>
<p><i class="fa fa-rouble fa-2x"></i> fa-2x</p>
<p><i class="fa fa-rouble fa-3x"></i> fa-3x</p>
<p><i class="fa fa-rouble fa-4x"></i> fa-4x</p>
<p><i class="fa fa-rouble fa-5x"></i> fa-5x</p>
</body>
</html>Результат данного примера показан на рис. 2.
Рис. 2. Размеры иконок
Цвета
Поскольку иконка это текстовый символ, то к нему применимы стилевые свойства color, background, text-shadow и другие, задающие оформление текста. В примере 2 показаны некоторые варианты изменения вида иконок.
Пример 2. Оформление иконок через стили
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Font Awesome</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<style>
.fa-bug { color: #f15a22; }
.fa-book {
background: #000; /* Чёрный цвет фона */
padding: 2px 5px; /* Поля */
border-radius: 3px; /* Радиус скругления */
}
.fa-car {
color: #96c13c; /* Цвет иконки */
text-shadow: 2px 2px 0 #333; /* Резкая тень под иконкой */
}
.fa-comment {
color: #f7941e; /* Цвет иконки */
text-shadow: 0 0 6px #000; /* Размытая тень */
}
</style>
</head>
<body>
<p><i class="fa fa-bug fa-2x"></i></p>
<p><i class="fa fa-book fa-2x fa-inverse"></i></p>
<p><i class="fa fa-car fa-2x"></i></p>
<p><i class="fa fa-comment fa-2x"></i></p>
</body>
</html>Результат данного примера показан на рис. 3.
Рис. 3. Цветные иконки
Font Awesome вводит специальный класс fa-inverse, изменяющий цвет иконок на белый, поэтому в стилях для иконки книжки цвет не указывается.
Поворот иконок
Иконки можно поворачивать на 90, 180 или 270 градусов по часовой стрелке, а также отражать их по горизонтали или вертикали. Для этого применяются следующие классы:
- fa-rotate-90 — поворот на 90º по часовой стрелке;
- fa-rotate-180 — поворот на 180º;
- fa-rotate-270 — поворот на 270º;
- fa-flip-horizontal — отражение по горизонтали;
- fa-flip-vertical — отражение по вертикали.
Надо учитывать, что не все иконки имеет смысл поворачивать и отражать, результат будет заметен для несимметричных иконок (пример 3).
Пример 3. Поворот и отражение иконок
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Font Awesome</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<p><i class="fa fa-plane fa-2x"></i></p>
<p><i class="fa fa-plane fa-rotate-90 fa-2x"></i></p>
<p><i class="fa fa-plane fa-flip-horizontal fa-2x"></i></p>
</body>
</html>Результат данного примера показан на рис. 4. Первая иконка самолёта выводится в исходном виде, вторая поворачивается на 90º, а третья отражается по горизонтали.
Рис. 4. Преобразования иконки
Анимация
Анимация обычно применяется для создания эффекта ожидания. Иконки можно заставить бесконечно вращаться по часовой стрелке двумя способами. Класс fa-spin производит плавное вращение, а fa-pulse — пошаговое вращение. Ниже показано вращение футбольного мяча.
<p><i class="fa fa-futbol-o fa-spin fa-2x"></i></p>Объединение иконок
Кроме обычного вывода иконки можно комбинировать между собой. Для этого создаём элемент <div> с классом fa-stack, а в него уже вставляем желаемые иконки. Вначале идёт нижняя, затем верхняя. К самим иконкам добавляется класс fa-stack-1x или fa-stack-2x, в зависимости от того, какая иконка должна быть больше размером. Ниже показана основная структура кода.
<div class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</div>Для отдельных иконок мы можем задавать собственный стиль, например, цвет иконки. Тем самым получить новые цветовые решения (пример 4).
Пример 4. Комбинация иконок
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Font Awesome</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<style>
.fa-ban {
color: #d51920; /* Цвет */
opacity: 0.6; /* Полупрозрачность */
}
</style>
</head>
<body>
<div class="fa-stack">
<i class="fa fa-bug fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x"></i>
</div>
</body>
</html>Результат данного примера показан на рис. 5.
Рис. 5. Комбинация иконок
Последнее изменение: 11.08.2018
Что такое FontAwesome?
Font Awesome — это набор масштабируемых векторных иконок. Основной плюс и удобство этого набора — возможность лёгкой персонализации. Любой иконке Вы можете задать свой размер, цвет, тени и все, что делается силами CSS. К тому же это абсолютно бесплатно. Сборка иконок версии Font Awesome 4.5.0 состоит из 605 иконок!
Как установить FontAwesome?
СПОСОБ 1
Для установки на ваш сайт набора иконок Font Awesome нужно выполнить несколько несложных шагов:
- Скачать дистрибутив с сайта fontawesome.io. Версия 4.5.0 весит 538 Кб.
- Распаковать архив и скопировать папку «font-awesome-4.5.0», например, в корень вашего сайта, туда где лежит файл index.
- Подключить файлы в <head> Вашего сайта. Перед закрывающимся тегом </head> поместить строчку: <link rel=»stylesheet» href=»/font-awesome/css/font-awesome.css»>. Не забудьте изменить путь, если скопировали папку с шрифтами в другое место.
На этом установка пакета иконок Font Awesome закончена.
СПОСОБ 2
Способ подходит для платформы WordPress и для тех кто не хочет занимать лишнее место на своём FTP. Скопируйте функцию в свой файл functions.php (Админка WP — Внешний вид — Редактор). Сохраняем изменения и можно пользоваться.
function font_awesome() {
if (!is_admin()) {
wp_register_style('font-awesome', 'http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css');
wp_enqueue_style('font-awesome');
}
}
add_action('wp_enqueue_scripts', 'font_awesome');
Как пользоваться FontAwesome?
Для вставки иконки на сайт идём сайт fontawesome.ru/all-icons/, выбираем нужную иконку и копируем её тег . Например, для иконки anchor тег <i class="fa fa-anchor"></i>. Вставляем тег в нужное место и получаем:
Изменяем размер font awesome icons
Для изменения размера пользуемся одним из дополнительных тегов: fa-5x, fa-4x, fa-3x, fa-2x, fa-lg. Например:
<i class="fa fa-anchor fa-lg"></i> fa-lg
<i class="fa fa-anchor fa-2x"></i> fa-2x
<i class="fa fa-anchor fa-3x"></i> fa-3x
<i class="fa fa-anchor fa-4x"></i> fa-4x
<i class="fa fa-anchor fa-5x"></i> fa-5x
fa-lg fa-2x fa-3x fa-4x fa-5x
Поворачиваем font awesome icons
Чтобы повернуть иконку как и в случае с размером добавляем к основному тегу:
<i class="fa fa-home fa-5x fa-rotate-90"></i>
<i class="fa fa-home fa-5x fa-rotate-180"></i>
<i class="fa fa-home fa-5x fa-rotate-270"></i>
<i class="fa fa-home fa-5x fa-spin"></i>
<i class="fa fa-home fa-5x fa-pulse"></i>
Группировка иконок font awesome
Для наложения одной иконки на другую создаем родительский класс fa-stack, класс fa-stack-1x используем для стандартного размера иконки, а класс fa-stack-2x для увеличенного.
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-home fa-stack-1x"></i>
</span>
Как изменить цвет у иконки font awesome
Для того чтобы изменить цвет иконки можно дописать внутри тега <i> свойство style. Либо положить иконку в один из тегов: <span>, <p>, <div>, с присвоенным классом стилей из файла styles.css.
<i class="fa fa-home fa-5x" style="color: red"></i>
Если вы хотите сделать из иконки ссылку, то просто поместите её в тег <a>.
Пожалуй все самые основные моменты при использовании иконок от Font Awesome я описал. Если остались вопросы — задавайте их в комментариях.
- Необходимые шаги для использования иконок
- Использование иконок Font Awesome
- Масштаб иконок Font Awesome и их цвет
- Использование иконок с кнопками
- Добавление эффекта тени к иконкам
- Использование иконок Font Awesome в списке
- Анимация иконок Font Awesome
- Поворот иконок Font Awesome
Для того, чтобы использовать иконки, вам необходимо следовать этим шагам:
Скопируйте код, предоставленный веб-страницей Font Awesome, и вставьте в <head> каждого шаблона или страницы, где хотите использовать иконки Font Awesome.
Для использования последней версии иконок this page смотрите эту страницу .
Здесь мы используем версию 5.8.1 link rel, чтобы определить связь между текущим документом и файлом со ссылкой:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">Загрузка и установка не требуются.
Иконки должны быть расположены внутри элемента <body>. Найдите необходимую вам иконку и скопируйте ее HTML код.
Код иконки будет выглядеть следующим образом:
<i class="fas fa-camera"></i>Можно легко изменить размер и цвет иконки и даже добавить к ней тени, используя только CSS. Иконки также могут быть перемещаемы и анаимируемы.
Иконки могут находится фактически где угодно, если используете стилевой префикс (fa) и название иконки. Font Awesome используется вместе со строчными элементами, и рекомендуется придерживаться к ним при проекте с согласованным HTML элементом.
Для добавления иконок на веб-страницы допустимо использование тегов <i> и <span>. Если вам не нравится, что сайт предоставляет вам код с тегом <i>, вы можете заменить его на <span>.
Для ссылки на иконку вам необходимо использовать имя иконки с префиксомpan fa- и предпочитаемый вами стиль с соответствующим префиксом (fas, fal, far или fab).
Используйте элемента <i> для ссылки на элемент:
<i class="fas fa-camera"></i>Или используйте элемент span:
<span class="fas fa-camera"></span>Префикс fa устарел в версии 5. Новые префиксы по умолчанию fas (сплошной стиль), fab (бренды), far (обычный стиль) и fal (тонкий стиль).
Пример
<!DOCTYPE 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>Иконки наследуют размер шрифта их родительского контейнера, чтобы соответствовать любому тексту, который может быть использован вместе с ними. Можно увеличить или уменьшить масштаб иконок относительно унаследованного размера шрифта с помощью таких классов, как fa-xs, span class=»attribute»>fa-sm, fa-lg, fa-2x и др.
Что касается цвета, он может быть установлен с помощью CSS свойства color. Просто необходимо установить иконки внутри элемента <div> и задать для него цвет в стиле, или просто установить стиль для элемента <i>.
Пример
<!DOCTYPE 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>Смотрите детали:
Также возможно добавить стиль непосредственно к размеру иконки, устанавливая font-size во внешнем стиле иконки или в стилевом атрибуте HTML элемента, который ссылается на иконку.
Пример
<!DOCTYPE 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>Вы можете также добавить иконки при создании кнопок. Просто вставьте иконку в элемент <button>.
Пример
<!DOCTYPE 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.
Установите тень для того элемента, к которому относится иконка:
Пример
<!DOCTYPE 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>С помощью иконок можно сделать много всего! Можете оформлять ваши HTML списки в виде декоративных маркеров.
Используйте класс fa-ul для элемента <ul> и класс fa-li для элемента <li>, чтобы заменить маркеры по умолчанию в неупорядоченном списке.
Пример
<!DOCTYPE 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>Используйте класс fa-spin для плавного вращения иконки и класс fa-pulsefa-spinner.
Будет выглядеть таким образом:
<i class="fas fa-spinner fa-spin"></i>Смотрите пример, чтобы увидеть разницу между классами fa-spin и fa-pulse:
Пример
<!DOCTYPE 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>Пример с несколькими анимированными иконками:
Пример
<!DOCTYPE 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>Довольно часто для дополнительного дизайна вам может понадобиться поворачивать, отражать иконку.
Для произвольного поворота и отражения иконок используйте классы fa-rotate-* и fa-flip-*.
Пример
<!DOCTYPE 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>Смотрите градус и детали вращения:
Что такое Font Awesome
Иконочный шрифт Awesome — это простой шрифт, содержащий в себе в место букв символы и специальные знаки, которые легко оформлять через CSS по такой же аналогии как делаем мы это с простым шрифтом. То есть, при помощи CSS можем установить для них цвет, поменять размер, задать тень и многое другое.
В библиотеке Font Awesome версии 4.7.0 содержится 646 иконок различных тематик, которые можно задействовать как для коммерческих проектов так и личного использования абсолютно бесплатно.
- Содержание:
- 1. Как подключить шрифт Awesome
- 2. Как работать с иконками Font Awesome
- 2.1 Как увеличить иконку
- 2.2 Как фиксировать ширину иконки
- 2.3 Как маркировать списки LI иконками
- 2.4. Кавычки для цитат обрамленные в рамке
- 2.5. Анимированные иконки
- 2.6. Поворачивание и отзеркаливание иконок
- 2.7. Группирование иконок
- 2.8. Примеры использование иконок в Bootstrap 3
- 3. Группы иконок
- 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. Брендовые иконки
- 3.17. Иконки диаграмм
- 3.18. Вращающиеся иконки
- 4. Похожие ресурсы
- 4.1. IcoMoon
- 4.2. Material icons
- 4.3. Fontello
- 4.4. Foundation Icon
1. Как подключить шрифт Awesome
Можно выделить два способа, это использование сторонних ресурсов от куда будем подгружать файл font-awesome.css и подключать шрифты через CSS или следующий способ, это скачиваем к себе архив с шрифтом Awesome и подключаем его при помощи тега <link>. Далее более подробно разберем каждый из этих способов.
Способ 1
Используем сторонние сервисы
CDNJS или
BootstrapCDN. Размещенный на них файл font-awesome.css мы подключаем при помощи данных строк:
Для подключения с CDNJS:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Для подключения с BootstrapCDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Этот код нужно добавить в раздел <head> желательно выше основного подключения style.css. После того как файл подключили, можно приступать использовать иконки на своем ресурсе.
Способ 2
Переходим на сайт
Font Awesome, и скачиваем архив со шрифтом. Распаковав архив мы увидим несколько папок. Для установки шрифта нам понадобятся две папки это css и папка fonts. Закачиваем их на свой сервер где расположен сайт, если есть папки с таким названием, то просто добавляем из них содержимое. Затем подключаем файл font-awesome.css или font-awesome.min.css при помощи тега <link>, только теперь из папки css нашего сайта.
Используем полную версию:
<link rel="stylesheet" href="http://ваш_сайт/css/font-awesome.css">
Используем минимизированную версию:
<link rel="stylesheet" href="http://ваш_сайт/css/font-awesome.min.css">
2. Как работать с иконками Font Awesome
На веб-страницу иконки можно добавить двумя способами, первый способ это использовать соответствующий класс иконки и указать его для элемента <i></i> или <span></span>, но предварительно нужно прописать класс fa каждому из элементов.
<i class="fa fa-shopping-cart"></i>
Второй способ, добавляем иконки при помощи псевдоэлементов ::before и ::after, а так же соответствующего значения свойства content для иконки. Обязательно указываем font-family: FontAwesome иначе шрифты работать не будут.
li:before {
content: "f07a"; /* добавляем иконку корзина */
font-family: FontAwesome;
color: #aaaaaa;
margin-right: 10px;
}
2.1. Как увеличить иконку
Что бы увеличить размер иконки достаточно в css прописать font-size и задать параметр. Так же можно увеличить размер иконки относительно его контейнера используя определенные классы fa-lg (увеличивает на 33%), fa-2x, fa-3x, fa-4x или fa-5x.
| fa-lg | fa-2x | fa-3x | fa-4x | fa-5x |
<i class="fa fa-star fa-lg"></i> <i class="fa fa-star fa-2x"></i> <i class="fa fa-star fa-3x"></i> <i class="fa fa-star fa-4x"></i> <i class="fa fa-star fa-5x"></i>
2.2. Как фиксировать ширину иконки
Для фиксирования ширины иконки используется класс fa-fw, задав его, мы фиксируем ширину тем самым можем их использовать как для навигации так и для оформление списков.
- Главная
- Карта
- Кабинет
- Настройки
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Главная</a></li> <li><a href="#"><i class="fa fa-map fa-fw"></i> Карта</a></li> <li><a href="#"><i class="fa fa-user fa-fw"></i> Кабинет</a></li> <li><a href="#"><i class="fa fa-wrench fa-fw"></i> Настройки</a></li> </ul>
2.3. Как маркировать списки LI иконками
Для замены стандартных маркеров в блоке <ul>…</ul> используются классы fa-ul и fa-li.
- элемент списка
- элемент списка
- элемент списка
- элемент списка
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>элемент списка</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>элемент списка</li> <li><i class="fa-li fa fa-square"></i>элемент списка</li> <li><i class="fa-li fa fa-check"></i>элемент списка</li> </ul>
2.4. Кавычки для цитат обрамленные в рамке
Что бы установить рамку для иконки используем класс 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.
<i class="fa fa-2x pull-left fa-border fa-quote-left"></i> 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. <i class="fa fa-2x pull-right fa-border fa-quote-right"></i>
2.5. Анимированные иконки
Что бы анимировать любую иконку достаточно добавить класс fa-spin для круговой анимации и для пульсирующей анимации fa-pulse. Так же можно использовать классы fa-spinner, fa-refresh, и fa-cog.
| fa-spin fa-cog | fa-spin fa-spinner | fa-spin fa-refresh | fa-spin fa-circle-o-notch | fa-pulse fa-spinner |
<i class="fa fa-2x fa-spin fa-cog"></i> <i class="fa fa-2x fa-spin fa-spinner"></i> <i class="fa fa-2x fa-spin fa-refresh"></i> <i class="fa fa-2x fa-spin fa-circle-o-notch"></i> <i class="fa fa-2x fa-pulse fa-spinner"></i>
2.6. Поворачивание и отзеркаливание иконок
Для поворота иконки используется класс rotate-* в котором указываем числовое значение на какой градус иконка будет повернута. Для зеркального отображения используется два класса это fa-flip-horizontal для горизонтальное отзеркаливание и вертикального icon-flip-vertical.
| normal | fa-rotate-90 | fa-rotate-180 | fa-rotate-270 | fa-flip-horizontal | fa-flip-vertical |
<i class="fa fa-2x fa-amazon"></i> normal <i class="fa fa-2x fa-amazon fa-rotate-90"></i> fa-rotate-90 <i class="fa fa-2x fa-amazon fa-rotate-180"></i> fa-rotate-180 <i class="fa fa-2x fa-amazon fa-rotate-270"></i> fa-rotate-270 <i class="fa fa-2x fa-amazon fa-flip-horizontal"></i> fa-flip-horizontal <i class="fa fa-2x fa-amazon fa-flip-vertical"></i> fa-flip-vertical
2.7. Группирование иконок
Иконки можно группировать накладывая их друг на друга, тем самым комбинируя их между собой. Чтобы создать группу из иконок, задаем класс для родителя fa-stack. Можно изменять размер иконки, класс fa-stack-1x задает стандартный размер, а класс fa-stack-2x для увеличения. Так же можно увеличивать при помощи классов fa-lg, fa-2x, fa-3x, fa-4x, или fa-5x.
| fa-twitter на fa-square-o | fa-flag на fa-circle | fa-terminal на fa-square | fa-ban на fa-camera |
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x"></i> </span> fa-twitter на fa-square-o<br> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse"></i> </span> fa-flag на fa-circle<br> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse"></i> </span> fa-terminal на fa-square<br> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger"></i> </span> fa-ban на fa-camera
2.8. Примеры использование иконок в Bootstrap 3
Иконки Awesome прекрасно работают в Bootstrap и это хорошо видно из данных примеров.
<a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg"></i> Удалить</a>
<a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog"></i> Настройки</a>
<a class="btn btn-lg btn-success" href="#">
<i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Версия 4.7.0</a>
<div class="btn-group">
<a class="btn btn-default" href="#">
<i class="fa fa-align-left" title="Align Left"></i>
</a>
<a class="btn btn-default" href="#">
<i class="fa fa-align-center" title="Align Center"></i>
</a>
<a class="btn btn-default" href="#">
<i class="fa fa-align-right" title="Align Right"></i>
</a>
<a class="btn btn-default" href="#">
<i class="fa fa-align-justify" title="Align Justify"></i>
</a>
</div>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Ваш Email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input class="form-control" type="password" placeholder="Пароль">
</div>
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> Пользователь</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Редактировать</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Удалить</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Забанить</a></li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-unlock"></i> Дать права администратора</a></li>
</ul>
</div>
3. Группы иконок
В версии Font Awesome 4.7 включены новые 41 иконка. Иконки разбиты на группы для удобного отбора при помощи поиска или по навигации. У каждой иконки представлен класс и CSS код для вставки при помощи свойства content.
3.1. Иконки для веб-приложений
fa-bathf2cd
fa-id-cardf2c2
fa-id-card-of2c3
fa-envelope-openf2b6
fa-envelope-open-of2b7
fa-id-badgef2c1
fa-microchipf2db
fa-podcastf2ce
fa-showerf2cc
fa-snowflake-of2dc
fa-thermometer-fullf2c7
fa-thermometer-emptyf2cb
fa-thermometer-quarterf2ca
fa-thermometer-halff2c9
fa-thermometer-three-quartersf2c8
fa-thermometer-fullf2c7
fa-user-circlef2bd
fa-user-circle-of2be
fa-user-of2c0
fa-window-closef2d3
fa-window-close-of2d4
fa-window-maximizef2d0
fa-window-restoref2d2
fa-window-minimizef2d
fa-address-bookf2b9
fa-address-book-of2ba
fa-address-cardf2bb
fa-address-card-of2bc
fa-adjustf042
fa-anchorf13d
fa-archivef187
fa-arrowsf047
fa-asteriskf069
fa-atf1fa
fa-balance-scalef24e
fa-banf05e
fa-bankf19c
fa-barcodef02a
fa-battery-emptyf244
fa-battery-halff242
fa-battery-quarterf243
fa-battery-three-quartersf241
fa-battery-fullf240
fa-bedf236
fa-beerf0fc
fa-bellf0f3
fa-bell-of0a2
fa-bell-slashf1f6
fa-bell-slash-of1f7
fa-binocularsf1e5
fa-birthday-cakef1fd
fa-boltf0e7
fa-bombf1e2
fa-bookf02d
fa-bookmarkf02e
fa-bookmark-of097
fa-briefcasef0b1
fa-bugf188
fa-buildingf1ad
fa-building-of0f7
fa-bullhornf0a1
fa-bullseyef140
fa-calculatorf1ec
fa-calendarf073
fa-calendar-check-of274
fa-calendar-minus-of272
fa-calendar-of133
fa-calendar-plus-of271
fa-calendar-times-of273
fa-cart-plusf217
fa-ccf20a
fa-certificatef0a3
fa-clock-of017
fa-clone f24d
fa-closef00d
fa-cloudf0c2
fa-cloud-downloadf0ed
fa-cloud-uploadf0ee
fa-codef121
fa-code-forkf126
fa-coffeef0f4
fa-commentf075
fa-comment-of0e5
fa-commentingf27a
fa-commenting-of27b
fa-commentsf086
fa-comments-of0e6
fa-compassf14e
fa-copyrightf1f9
fa-creative-commonsf25e
fa-cropf125
fa-crosshairsf05b
fa-cubef1b2
fa-cubesf1b3
fa-cutleryf0f5
fa-dashboardf0e4
fa-databasef1c0
fa-desktopf108
fa-diamondf219
fa-downloadf019
fa-editf044
fa-ellipsis-hf141
fa-ellipsis-vf142
fa-envelopef0e0
fa-envelope-of003
fa-envelope-squaref199
fa-exclamationf12a
fa-exclamation-circlef06a
fa-exclamation-trianglef071
fa-external-linkf08e
fa-external-link-squaref14c
fa-eyef06e
fa-eye-slashf070
fa-eyedropperf1fb
fa-faxf1ac
fa-filmf008
fa-filterf0b0
fa-firef06d
fa-fire-extinguisherf134
fa-flagf024
fa-flag-checkeredf11e
fa-flag-of11d
fa-flashf0e7
fa-flaskf0c3
fa-frown-of119
fa-futbol-of1e3
fa-gearf013
fa-gearsf085
fa-giftf06b
fa-glassf000
fa-globef0ac
fa-graduation-capf19d
fa-groupf0c0
fa-hashtagf292
fa-heartf004
fa-heart-of08a
fa-heartbeatf21e
fa-h-squaref0fd
fa-historyf1da
fa-homef015
fa-hospital-of0f8
fa-hourglassf254
fa-hourglass-startf251
fa-hourglass-halff252
fa-hourglass-endf253
fa-hourglass-of250
fa-i-cursorf246
fa-inboxf01c
fa-industryf275
fa-infof129
fa-info-circlef05a
fa-keyf084
fa-languagef1ab
fa-leaff06c
fa-legalf0e3
fa-lemon-of094
fa-lightbulb-of0eb
fa-location-arrowf124
fa-lockf023
fa-magicf0d0
fa-magnetf076
fa-mapf279
fa-map-markerf041
fa-map-of278
fa-map-pinf276
fa-map-signsf277
fa-medkitf0fa
fa-meh-of11a
fa-microphonef130
fa-microphone-slashf131
fa-moon-of186
fa-mouse-pointerf245
fa-musicf001
fa-naviconf0c9
fa-newspaper-of1ea
fa-object-groupf247
fa-object-ungroupf248
fa-paint-brushf1fc
fa-paper-planef1d8
fa-paper-plane-of1d9
fa-pawf1b0
fa-pencilf040
fa-pencil-squaref14b
fa-pencil-square-of044
fa-percentf295
fa-phonef095
fa-phone-squaref098
fa-plugf1e6
fa-power-offxf011
fa-printf02f
fa-puzzle-piecef12e
fa-qrcodef029
fa-questionf128
fa-question-circlef059
fa-quote-leftf10d
fa-quote-rightf10e
fa-recyclef1b8
fa-refreshf021
fa-registeredf25d
fa-replyf112
fa-reply-allf122
fa-retweetf079
fa-roadf018
fa-rssf09e
fa-rss-squaref143
fa-searchf002
fa-search-minusf010
fa-search-plusf00e
fa-sendf1d8
fa-send-of1d9
fa-serverf233
fa-sharef064
fa-share-squaref14d
fa-share-square-of045
fa-shieldf132
fa-shopping-bagf290
fa-shopping-basketf291
fa-shopping-cartf07a
fa-sign-inf090
fa-sign-outf08b
fa-signalf012
fa-sitemapf0e8
fa-slidersxf1de
fa-smile-oxf118
fa-soccer-ball-of1e3
fa-sortf0dc
fa-sort-alpha-ascf15d
fa-sort-alpha-descf15e
fa-sort-amount-ascf160
fa-sort-amount-descf161
fa-sort-ascf0de
fa-sort-descf0dd
fa-sort-numeric-ascf162
fa-sort-numeric-descf163
fa-spoonf1b1
fa-starf005
fa-star-halff089
fa-star-half-of123
fa-star-of006
fa-street-viewf21d
fa-suitcasef0f2
fa-sun-of185
fa-supportf1cd
fa-tachometerf0e4
fa-tagf02b
fa-tagsf02c
fa-tasksf0ae
fa-terminalf120
fa-thumb-tackf08d
fa-ticketf145
fa-tintf043
fa-trademarkf25c
fa-trashf1f8
fa-trash-of014
fa-treef1bb
fa-trophyf091
fa-ttyf1e4
fa-umbrellaf0e9
fa-unlockf09c
fa-unlock-altf13e
fa-unsortedf0dc
fa-uploadf093
fa-userf007
fa-user-plusxf234
fa-user-secretf21b
fa-user-timesf235
fa-user-mdf0f0
fa-volume-downf027
fa-volume-offf026
fa-volume-upf028
fa-warningf071
fa-wifif1eb
fa-wrenchf0ad
3.2. Иконки для людей с ограниченными возможностями
fa-american-sign-language-interpretingf2a3
fa-assistive-listening-systemsf2a2
fa-audio-descriptionf29e
fa-blindf29d
fa-braillef2a1
fa-deaff2a4
fa-low-visionf2a8
fa-question-circle-of29c
fa-sign-languagef2a7
fa-ttyf1e4
fa-universal-accessf29a
fa-volume-control-phonef2a0
fa-wheelchairf193
fa-wheelchair-altf29b
3.3. Иконки рука
fa-hand-grab-of255
fa-hand-lizard-of258
fa-hand-paper-of256
fa-hand-peace-of25b
fa-hand-pointer-of25a
fa-hand-scissors-of257
fa-hand-spock-oxf259
fa-hand-o-downf0a7
fa-hand-o-leftf0a5
fa-hand-o-rightf0a4
fa-hand-o-upf0a6
fa-thumbs-downf165
fa-thumbs-o-downf088
fa-thumbs-o-upf087
fa-thumbs-upf164
fa-handshake-of2b5
3.4. Иконки для форм
fa-check-squaref14a
fa-check-square-of046
fa-circlef111
fa-circle-of10c
fa-dot-circle-of192
fa-minus-squaref146
fa-minus-square-of147
fa-plus-squaref0fe
fa-plus-square-of196
fa-squaref0c8
fa-square-of096
3.5. Иконки для гаджетов
fa-mobilef10b
fa-tabletf10a
fa-televisionf26c
fa-video-cameraf03d
fa-cameraf030
fa-camera-retrof083
fa-hdd-of0a0
fa-headphonesf025
fa-laptopf109
fa-gamepadf11b
fa-keyboard-of11c
3.6. Иконки транспорт
fa-ambulancef0f9
fa-bicyclef206
fa-busf207
fa-carf1b9
fa-fighter-jetf0fb
fa-motorcyclef21c
fa-planef072
fa-rocketf135
fa-shipf21a
fa-space-shuttlef197
fa-subwayf239
fa-taxif1ba
fa-trainf238
fa-truckf0d1
fa-wheelchairf193
fa-wheelchair-altf29b
3.7. Гендерные иконки
fa-childf1ae
fa-femalef182
fa-malef183
fa-genderlessf1db
fa-transgenderf224
fa-transgender-altf225
fa-marsf222
fa-mars-doublef227
fa-mars-strokef229
fa-mars-stroke-hf22b
fa-mars-stroke-vf22a
fa-mercuryf223
fa-neuterf22c
fa-venusf221
fa-venus-doublef226
fa-venus-marsf228
3.8. Файловые иконки
fa-folderf07b
fa-folder-of114
fa-folder-openf07c
fa-folder-open-of115
fa-filef15b
fa-file-of016
fa-file-archive-of1c6
fa-file-audio-of1c7
fa-file-code-of1c9
fa-file-excel-of1c3
fa-file-image-of1c5
fa-file-movie-of1c8
fa-file-pdf-of1c1
fa-file-photo-oxf1c5
fa-file-powerpoint-of1c4
fa-file-sound-of1c7
fa-file-video-of1c8
fa-file-word-of1c2
fa-file-zip-of1c6
fa-file-textf15c
fa-file-text-of0f6
fa-files-of0c5
fa-imagef03e
fa-sticky-notef249
fa-sticky-note-of24a
3.9. Иконки валют
fa-btcf15a
fa-usdf155
fa-eurof153
fa-gbpf154
fa-yenf157
fa-moneyf0d6
fa-rublef158
fa-rupeef156
fa-shekelf20b
fa-turkish-liraf195
fa-wonf159
fa-ggf260
3.10. Иконки управляющих символов
fa-checkf00c
fa-check-circlef058
fa-check-circle-of05d
fa-circle-thinf1db
fa-check-squaref14a
fa-check-square-of046
fa-circlef111
fa-circle-of10c
fa-dot-circle-of192
fa-minus-squaref146
fa-minus-square-of147
fa-plus-squaref0fe
fa-plus-square-of196
fa-minusf068
fa-minus-circlef056
fa-squaref0c8
fa-square-of096
fa-plusf067
fa-plus-circlef055
fa-times-circlef057
fa-times-circle-of05c
3.11. Иконки платежных систем
fa-cc-amexf1f3
fa-cc-diners-clubf24c
fa-cc-discoverf1f2
fa-cc-jcbf24b
fa-cc-mastercardf1f1
fa-cc-paypalf1f4
fa-cc-stripef1f5
fa-cc-visaf1f0
fa-credit-cardf09d
fa-credit-card-altf283
fa-google-walletf1ee
fa-paypalf1ed
3.12. Иконки социальных сетей и сообществ
fa-codepenf1cb
fa-telegramf2c6
fa-behancef1b4
fa-behance-squaref1b5
fa-deviantartf1bd
fa-whatsappf232
fa-diggf1a6
fa-dribbblef17d
fa-facebookf09a
fa-facebook-officialf230
fa-facebook-squaref082
fa-google-plusf0d5
fa-google-plus-squaref0d4
fa-jsfiddlef1cc
fa-flickrf16e
fa-instagramf16d
fa-githubf09b
fa-github-altf113
fa-github-squaref092
fa-linkedinf0e1
fa-linkedin-squaref08c
fa-odnoklassnikif263
fa-odnoklassniki-squaref264
fa-pinterestf0d2
fa-pinterest-pf231
fa-pinterest-squaref0d3
fa-stack-overflowf16c
fa-yelpf1e9
fa-tumblrf173
fa-tumblr-squaref174
fa-twitterf099
fa-twitter-squaref081
fa-vkf189
fa-youtube-squaref166
fa-youtubef167
3.13. Иконки редактирования текста
fa-align-centerf037
fa-align-justifyf039
fa-align-leftf036
fa-align-rightf038
fa-boldf032
fa-chainf0c1
fa-chain-brokenf127
fa-clipboardf0ea
fa-columnsf0db
fa-copyf0c5
fa-cutf0c4
fa-dedentf03b
fa-eraserf12d
fa-floppy-of0c7
fa-fontf031
fa-headerf1dc
fa-indentf03c
fa-italicf033
fa-listf03a
fa-list-altf022
fa-list-olf0cb
fa-list-ulf0ca
fa-outdentf03b
fa-paperclipf0c6
fa-paragraphf1dd
fa-pastef0ea
fa-repeatf01e
fa-rotate-leftf0e2
fa-rotate-rightf01e
fa-savef0c7
fa-strikethroughf0cc
fa-subscriptf12c
fa-superscriptf12b
fa-tablef0ce
fa-text-heightf034
fa-text-widthf035
fa-thf00a
fa-th-largef009
fa-th-listf00b
fa-underlinef0cd
3.14. Иконки направления
fa-level-downf149
fa-level-upf148
fa-angle-double-downf103
fa-angle-double-leftf100
fa-angle-double-rightf101
fa-angle-double-upf102
fa-angle-downf107
fa-angle-leftf104
fa-angle-rightf105
fa-angle-upf106
fa-arrow-circle-downf0ab
fa-arrow-circle-leftf0a8
fa-arrow-circle-rightf0a9
fa-arrow-circle-upf0aa
fa-arrow-circle-o-downf01a
fa-arrow-circle-o-leftf190
fa-arrow-circle-o-rightf18e
fa-arrow-circle-o-upf01b
fa-arrow-downf063
fa-arrow-leftf060
fa-arrow-rightf061
fa-arrow-upf062
fa-arrows-hf07e
fa-arrows-vf07d
fa-caret-downf0d7
fa-caret-leftf0d9
fa-caret-rightf0da
fa-caret-upf0d8
fa-caret-square-o-downf150
fa-caret-square-o-leftf191
fa-caret-square-o-rightf152
fa-caret-square-o-upf151
fa-cart-arrow-downf218
fa-chevron-circle-downf13a
fa-chevron-circle-leftf137
fa-chevron-circle-rightf138
fa-chevron-circle-upf139
fa-chevron-downf078
fa-chevron-leftf053
fa-chevron-rightf054
fa-chevron-upf077
fa-exchangef0ec
fa-long-arrow-downf175
fa-long-arrow-leftf177
fa-long-arrow-rightf178
fa-long-arrow-upf176
fa-toggle-downf150
fa-toggle-leftf191
fa-toggle-rightf152
fa-toggle-upf151
fa-toggle-offf204
fa-toggle-onf205
3.15. Иконки видео плеера
fa-arrows-altf0b2
fa-backwardf04a
fa-forwardf04e
fa-compressf066
fa-ejectf052
fa-expandf065
fa-fast-backwardf049
fa-fast-forwardf050
fa-pausef04c
fa-pause-circlef28b
fa-pause-circle-of28c
fa-playf04b
fa-play-circlef144
fa-play-circle-of01d
fa-randomf074
fa-step-backwardf048
fa-step-forwardf051
fa-stopf04d
fa-stop-circlef28d
fa-stop-circle-of28e
fa-youtube-playf16a
3.16. Брендовые иконки
fa-bandcampf2d5
fa-eercastf2da
fa-etsyf2d7
fa-free-code-campf2c5
fa-gravf2d6
fa-imdbf2d8
fa-linodef2b8
fa-meetupf2e0
fa-quoraf2c4
fa-ravelryf2d9
fa-superpowersf2dd
fa-wpexplorerf2de
fa-500pxf26e
fa-adnf170
fa-amazonf270
fa-androidf17b
fa-angellistf209
fa-applef179
fa-bitbucketf171
fa-bitbucket-squaref172
fa-black-tief27e
fa-bluetoothf293
fa-bluetooth-bf294
fa-buyselladsf20d
fa-chromef268
fa-css3f13c
fa-connectdevelopf20e
fa-dashcubef210
fa-deliciousf1a5
fa-dropboxf16b
fa-drupalf1a9
fa-edgef282
fa-empiref1d1
fa-expeditedsslf23e
fa-firefoxf269
fa-fonticonsf280
fa-fort-awesomef286
fa-forumbeef211
fa-foursquaref180
fa-gef1d1
fa-get-pocketf265
fa-gitf1d3
fa-git-squaref1d2
fa-ggf260
fa-gg-circlef261
fa-googlef1a0
fa-gratipayf184
fa-hacker-newsf1d4
fa-houzzf27c
fa-html5f13b
fa-ioxhostf208
fa-joomlaf1aa
fa-lastfmf202
fa-lastfm-squaref203
fa-leanpubf212
fa-linuxf17c
fa-maxcdnf136
fa-meanpathf20c
fa-mediumf23a
fa-mixcloudf289
fa-modxf285
fa-opencartf23d
fa-openidf19b
fa-operaf26a
fa-optin-monsterf23c
fa-pagelinesf18c
fa-pied-piperf1a7
fa-pied-piper-altf1a8
fa-product-huntf288
fa-qqf1d6
fa-rebelf1d0
fa-redditf1a1
fa-reddit-squaref1a2
fa-renrenf18b
fa-safarif267
fa-scribdf28a
fa-sellsyf213
fa-share-altf1e0
fa-share-alt-squaref1e1
fa-shirtsinbulkf214
fa-simplybuiltf215
fa-skyatlasf216
fa-skypef17e
fa-slackf198
fa-slidesharef1e7
fa-soundcloudf1be
fa-spotifyf1bc
fa-stack-exchangef18d
fa-steamf1b6
fa-steam-squaref1b7
fa-stethoscopef0f1
fa-stumbleuponf1a4
fa-stumbleupon-circlef1a3
fa-tencent-weibof1d5
fa-trellof181
fa-tripadvisorf262
fa-usbf287
fa-viacoinf237
fa-vimeof27d
fa-vimeo-squaref194
fa-vinef1ca
fa-wechatf1d7
fa-weibof18a
fa-wikipedia-wf266
fa-windowsf17a
fa-wordpress f19a
fa-xingf168
fa-xing-squaref169
fa-y-combinatorf23b
fa-yahoof19e
3.17. Иконки диаграмм
fa-area-chartf1fe
fa-bar-chartf080
fa-line-chartf201
fa-pie-chartf200
3.18. Вращающиеся иконки
fa-circle-o-notchf1ce
fa-spinnerf110
fa-gearf013
fa-spinnerf110
fa-refreshf021
4. Похожие ресурсы
По мимо сервиса Font Awesome мы можем использовать другие ресурсы, для примера перечислю их ниже.
4.1. IcoMoon
IcoMoon — один из популярных иконочных шрифтов. На данном сервисе представлено три пакета, более детально с ними можете ознакомиться тут. От выбранного пакета будет зависеть формат и качество иконок. Так же IcoMoon представляет онлайн приложение в котором можно менять цвет, поворот и много другое, но самый большой плюс можно выделить в том что позволяет импортировать свои иконки и создавать иконочные шрифты.
4.2. Material icons
Material icons — сервис представляет плоские иконки от Google. Иконки красиво отображаются на всех платформах и работают на любых разрешений экрана.
Коллекция содержит в себе более 750 иконок и легко внедряется на сайт при помощи тега link, для отображения иконок в браузере используется иконочный шрифт Material Icons.
Сами иконки добавляются при помощи i с классом material-icons или при помощи html кода иконки.
4.3. Fontello
На сервисе Fontello представлен большой выбор иконочных шрифтов. Также представлена возможность отбора иконок и загрузка их на свой компьютер.
4.4. Foundation Icon
Foundation Icon — уникальная коллекция иконочных шрифтов от разработчиков фреймворка Foundation. Уникальность их в том что тут представлены по мимо стандартных иконок есть круглые, так же иконки брендов и социальных сетей.