Bootstrap awesome font: Font Awesome, the iconic font designed for Bootstrap

Leave a Comment / Разное / By alexxlab / 17.03.2023

Содержание

Работа с Bootstrap | WebReference

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

Пример 1. Кнопки с иконками

<div>
 <a href="#"><i></i></a>
 <a href="#"><i></i></a>
 <a href="#"><i></i></a>
</div>
<div>
 <a href="#"><i></i></a>
 <a href="#"><i></i></a>
 <a href="#"><i></i></a>
</div>

Результат данного примера показан на рис. 1.

Рис. 1. Вид кнопок с иконками

Иконки также можно применять в качестве ссылок. Для примера возьмём хлебные крошки, в которых первым пунктом будет идти иконка домика (пример 2). Поскольку элемент <i> находится внутри ссылки <a>, иконка будет служить ссылкой и менять свой цвет при наведении на неё курсора мыши.

Пример 2. Хлебные крошки

<ul>
  <li><a href="#"><i></i></a></li>
  <li><a href="#">Лес</a></li>
  <li><a href="#">Опушка</a></li> 
  <li>Пряничный домик</li>
</ul>

Результат данного примера показан на рис. 2.

Рис. 2. Хлебные крошки

При создании ниспадающего меню вставим иконку вместо текста и добавим по иконке перед каждым пунктом меню. Для списков Font Awesome использует специальный класс fa-ul для элемента <ul> и fa-li для элементов <li>. Дело в том, что ширина каждой иконки разная и левый край пунктов списка из-за этого окажется неровным. Указанные классы исправляют этот недостаток для обычного списка, но в нашем ниспадающем меню приводят к ошибкам. Поэтому добавляем свой стиль, который устанавливает положение иконок нужным нам образом (пример 3).

Пример 3. Ниспадающее меню

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ниспадающее меню</title>
  <link href="css/bootstrap. min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <style>
   .fa-ul {
    margin-left: 0; /* Отступ слева */
   }
   .fa-ul > li {
    text-indent: 1em; /* Сдвигаем текст вправо */
   }
   .fa-li {
    left: -0.5em; top: 0.4em; /* Положение иконки */
    color: #1fa67a; /* Цвет иконок */
   }
  </style>
 </head>
 <body>
  <div>
   <div>
    <button type="button" data-toggle="dropdown" aria-expanded="false">
     <i></i>
    </button>
    <ul role="menu" aria-labelledby="dropdownMenu">
     <li role="presentation"><a role="menuitem" href="#"><i></i> Автобусом</a></li>
     <li role="presentation"><a role="menuitem" href="#"><i></i> Такси</a></li>
     <li role="presentation"><a role="menuitem" href="#"><i></i> Пешком</a></li>
    </ul>
   </div>
  </div>
  <script src="js/jquery.  min.js"></script>
  <script src="js/bootstrap.min.js"></script>
 </body>
</html>

Результат данного примера показан на рис. 3.

Рис. 3. Ниспадающее меню

Автор: Влад Мержевич

Последнее изменение: 11.08.2018

Font Awesome, 为 Bootstrap 而创造的图标字体

一个字体文件， 249 个图标

一个文件包含了所有图标。。font Awesome 助完整表达表达页面上每个动作的含义。

用 CSS 控制

用CSS能非常容易的改变这些图标的颜色、大小、阴影以及任何CSS能控制的属性。

矢量图意味着每个图标都能在所有大小的屏幕上完美呈现。

个人、商业均可自由使用

Font Awesome是完全免费的，无论个人还是商业使用。详见协议。

IE7+

在Retina屏幕上也能完美呈现

Font Awesome 中包含的都是矢量图标，在高分辨率的显示器上也能完美呈现。

专为Bootstrap设计

Font Awesome используется в Bootstrap версии 2.2.2, версия 2.2.2.

设计师的助手

安装 fontawesome.otf 字体文件，在这个页面直接拷贝粘贴图标字符的代码就可以用于你的中了。

兼容阅读器

Font Awesome 不会阻止屏幕阅读器，这和其他图标字体的行为方式完全不同。

Font Awesome 3.

0 中的新特性

Изображение 14px Изображение

14px 字号做了最大的优化。

Поднастройка шрифта

Благодаря @grantgordon и @johnsmclay вы можете получить только те значки, которые вам нужны.

友好的版权协议

我们遵循 SIL 开放字体协议，代码遵循 MIT 协议。没有过多的束缚，带给你更多自由。

3.0 版本新增 40 个全新的图标

Проект Font Awesome на GitHub.

新样式

Новые стили для анимированных вращающихся значков, значков с множителями размера 2x-4x, границ значков и многого другого.

瘦身 28%

虽然增加了 16% 的图标，3.0 版本的体积却变得更小了。 Font Awesome 还可以定制，将你不需要的图标去掉00。

3.0 版本中新增的图标

Font Awesome 3.0 Версия 3.0, версия 40, версия 40, версия 3.0, версия 3.0. Проект Font Awesome на GitHub.

icon-cloud-download
icon-cloud-upload
значок-лампочка
обмен иконками
значок-колокольчик-альт
icon-file-alt
икона пива
значок-кофе
икона-еда
значок-истребитель

icon-user-md
значок-стетоскоп
значок-чемодан
иконостроительный
иконобольница
значок-скорая помощь
значок-аптечка
значок-h-знак
значок-плюс-знак-альт
значок-спиннер

значок-угол-левый
значок-угол-справа
значок-угол-вверх
значок-угол-вниз
значок-двойной угол-левый
значок-двойной угол-вправо
значок-двойной угол-вверх
icon-двойной угол-вниз
значок-круг-пусто
значок-круг

значок-рабочий стол
значок-ноутбук
значок-планшет
значок-мобильный телефон
значок-кавычки слева
значок-кавычки справа
значок-ответ
значок-github-альт
значок-папка-закрыть-альт
icon-folder-open-alt

适合 Web 应用的图标

значок-регулировка
значок-звездочка
значок-бан-круг
пиктограмма-гистограмма
значок-штрих-код
кубок
икона пива
колокольчик
значок-колокольчик-альт
значок-болт
иконопись
значок-закладка
значок-закладка-пусто
икона-портфель
значок-мегафон
икона-календарь
значок-камера
значок-камера-ретро
значок-сертификат
значок проверки
icon-check-пусто
значок-круг
значок-круг-пусто
значок-облако
icon-cloud-download
icon-cloud-upload
значок-кофе
значок-шестерня
значок-шестерни
значок-комментарий
значок-комментарий-альт
значок-комментарий
значок-комментарии-альт
значок кредитной карты
значок-приборная панель
значок-рабочий стол
значок загрузки

значок загрузки-альт

значок редактирования
значок-конверт
значок-конверт-alt
обмен иконками
значок-восклицательный знак
значок-внешняя-ссылка
значок-закрыть глаза
icon-eye-open
значок-facetime-видео
значок-истребитель
значок-пленка
значок-фильтр
икона-огонь
значок-флажок
значок-папка-закрыть
значок-папка-открыть
значок-папка-закрыть-альт
icon-folder-open-alt
икона-еда
икона-подарок
стеклянная икона
значок-глобус
группа иконок
значок жесткого диска
значок-наушники
икона-сердце

icon-heart-пусто
значок-дом
значок-входящие
значок-информация-знак
значок-ключ
икона
значок-ноутбук
icon-legal
значок-лимон
значок-лампочка
значок-замок
значок разблокировки

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

пиктограмма
значок-поделиться-альт

иконка-тележка
значок-сигнал
значок входа
значок-вывеска
значок-карта сайта
значок-сортировка
иконка-сортировка
набор иконок
значок-спиннер
значок-звезда
значок-звезда-пусто
значок-звезда-половинка
значок-планшет
значок-тег
теги иконок
иконки-задачи
значок-большой палец вниз
значок-большой палец вверх
значок-время
значок-оттенок
значок-корзина
значок-трофей
значок-грузовик
икона-зонт
значок загрузки
icon-upload-alt
значок пользователя
icon-user-md
значок-громкость-выкл
значок-уменьшение громкости
значок-громкость вверх
значок-предупреждающий знак
гаечный ключ
значок-увеличение
значок-уменьшение

文本编辑器图标

значок-файл
значок-файл-альт
икона
значок-копия
иконописная паста
значок сохранения
значок отмены
значок-повтор

значок-текст-высота
значок-текст-ширина
значок выравнивания по левому краю
выравнивание значков по центру
значок выравнивания по правому краю
выравнивание значков по выравниванию
значок-отступ-влево
значок-отступ-вправо

значок-шрифт
жирный значок
иконка-курсив
перечеркнутый значок
пиктограмма-подчеркивание
значок-ссылка
значок-скрепка
иконки-столбцы

стол-иконка
значок-th-большой
значок-й
значок-список
список иконок
список иконок-ol
список иконок-ul
список иконок-альт

指示方向的图标

значок-угол-левый
значок-угол-справа
значок-угол-вверх
значок-угол-вниз
значок-стрелка вниз
значок-стрелка-влево
значок-стрелка-вправо
значок-стрелка вверх

значок каретки вниз
иконка каретки слева
иконка-вставка-справа
пиктограмма вверх
значок-шеврон вниз
значок-шеврон-левый
значок-шеврон-справа
значок-шеврон вверх

значок-круг-стрелка-вниз
значок-круг-стрелка-влево
значок-круг-стрелка-вправо
значок-круг-стрелка вверх
значок-двойной угол-левый
значок-двойной угол-вправо
значок-двойной угол-вверх
значок-двойной угол-вниз

значок-вниз
значок-рука-левая
значок-рука-право
значок с поднятой рукой
значок-круг
значок-круг-пусто

视频播放器图标

значок-игра-круг
игра с иконками
значок-пауза
значок-стоп

значок-шаг назад
значок-быстро-назад
значок-назад
значок-вперед

значок-быстрая перемотка вперед
значок шаг вперед
значок-выброс

полноэкранный значок
значок-изменить размер-полный
значок-изменить размер-маленький

医疗图标

Хотите изменить здравоохранение? Работай со мной в Kyruus.

значок-скорая помощь
кубок

значок-h-знак
иконобольница

значок-аптечка
значок-плюс-знак-альт

значок-стетоскоп
icon-user-md

集成

将Font Awesome 集成到 Bootstrap 非常容易,还可以被单独使用。

最简单的 Bootstrap + Font Awesome 集成方式

使用这种方式将 Font Awesome 集成到默认的 Bootstrap CSS中。

拷贝 Font Awesome 字体目录到你的项目中。
font-awesome.min.css 文件到你的项目中。
打开你的项目中的 font-awesome.min.css 文件并编辑字体路径指向正确的位置。
字体路径是相对于你的 CSS 目录的。
在html文档中的部分，引入 font-awesome.min.css 文件。
```
 
```
在浏览器中打开页面，检查是否正确启用了 Потрясающий шрифт!

自定义 Bootstrap + Font Awesome Less 文件的方式进行集成

修改 Bootstrap 的 Меньше 文件以集成 Font Awesome。

拷贝 Awesom
拷贝 font-awesome. less 文件到 bootstrap/less 目录。
打开 bootstrap.less 文件，并将 @import "sprites.less"; 替换为 @import "font-awesome.less";
打开你的项目中的 font-awesome.less 文件，并编辑 @FontAwesomePath 变量，将其值替换为指向字体文件的正确路径。
```
@FontAwesomePath: "../шрифт";
 
```
字体路径相对于存放编译之后的CSS文件的目录。
重新编译Bootstrap的所有 МЕНЬШЕ
在浏览器中打开页面，检查是否正确启用了 Потрясающий шрифт!

自定义 Bootstrap + Font Awesome 集成并使用使用 Sass 或 SCSS

我也从未过过 SASS 或 SCSS ，源码包中的 SCSS 或文件有问题的请通知我。

不使用 Bootstrap?

Font Awesome работает без Twitter Bootstrap.

Скопируйте каталог шрифтов Font Awesome в свой проект.
Скопируйте font-awesome.less или font-awesome.min.css в свой проект.
Откройте файл font-awesome.less или font-awesome.min.css вашего проекта и отредактируйте местоположение шрифта, указав его на каталог шрифтов (см. примеры выше).
Ознакомьтесь с примерами, чтобы начать использовать Font Awesome!

需要支持 IE7 浏览器？

Font Awesome поддерживает IE7. Если вам это нужно, примите мои соболезнования.

Получить Font Awesome, правильно работающий в современном браузере.
Скопируйте font-awesome-ie7.min.css в свой проект.
В вашего html укажите ссылку на ваш font-awesome-ie7.min.css.
```
 
```
Идите и жалуйтесь тому, кто решил, что вашему проекту нужна поддержка IE7.

案例

下面的案例大部分都是重用 Bootstrap 文档中的案例。

Использовать значки Font Awesome в:

Маркированные списки (как этот)
Кнопки
Группы кнопок
Навигация
Предварительно введенные формы
И многое другое с Custom CSS

Перезагрузить Касса Удалить

Комментарий Настройки Информация

Дом
Библиотека
Приложения
Настройки

Новые стили в версии 3.

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

Значок счетчика при загрузке содержимого…

Font Awesome
Версия 3.0

Синхронизация содержимого…

HTML实例

Встроенные значки

Разместите Font Awesome значки практически в любом месте с тегом .

значок-камера-ретро

 значок-камера-ретро

Классы значков отображаются через CSS :before.

更大的图标

通过给图标设置 значок-большой 、 значок-2x 、 icon-3x 或 icon-4x 样式，可以让图标相对于它所在的容器变得更大。

通过应用 значок-большой (增大 33%), значок-2x , icon-3x 或 icon-4x 样式让图标变得更大。

icon-camera-retro

иконка-камера-ретро

иконка-камера-ретро

иконка-камера-ретро

иконка-камера-ретро

Если ваши значки обрезаются сверху и снизу, убедитесь, что у вас есть достаточная высота строки.

Анимированный счетчик

Используйте класс icon-spin , чтобы заставить любую иконку вращаться. Лучше всего работает с icon-spinner и значок обновления .

Значок счетчика при загрузке содержимого…

 Значок счетчика при загрузке содержимого...

Анимации CSS3 не поддерживаются в IE7 — IE9.

Значки с рамками и вытянутыми

Используйте icon-border и pull-right или pull-left для удобного извлечения котировок или графика статьи.

<я>
Используйте несколько новых стилей вместе... масса новых возможностей.

<я>
Используйте несколько новых стилей вместе... масса новых возможностей.

按钮

Перезагрузить Касса

Комментарий Информация

Удалить Настройки

Font Awesome
Версия 3.0

Синхронизация содержимого…

Font Awesome 图标能够很好的应用于按钮组件中。将图标设置的再大也可以，Bootstrap中的 правая тяга 、 pull-left 和 icon-spin 样式都可以应用到图标上。

<а href="#">
   Перезагрузить
<а href="#">
  Оформить заказ
<а href="#">
   Комментарий
<а href="#">
  Информация
<а href="#">
  Удалить
<а href="#">
   Настройки
<а href="#">
  Font Awesome
Версия 3. 0
<а href="#">
   Синхронизация содержимого...

按钮组

<дел>

下拉菜单按钮
<дел> Пользователь <ул>
Изменить

Удалить

Запрет

Сделать администратором

Не забудьте добавить соответствующий JavaScript, чтобы включить раскрывающиеся списки кнопок.
列表
Списки
Кнопки
Группы кнопок
Навигация
Предварительно введенные формы
Простая замена отдельных патронов.
<ул>
Списки

Кнопки

Группы кнопок

Навигация

Предварительные вводы формы

导航条
Дом
Библиотека
Приложения
Настройки
Используйте значки Font Awesome в навигации для предоставления полезных визуальных подсказок.
<ул>
Главная страница

Библиотека

Приложения

Настройки

Предварительно введенные формы
<форма> <дел>

<дел>

自定义 CSS
普通字体可以赋予的的 CSS 样式也能同样应用到 Font Awesom
向 Font Awesome 贡献你所创造的图标
Хотите помочь сделать Font Awesome еще круче? Внесите свой вклад в сообщество Font Awesome, создав новые пиктограммы для набора.
Если выбрано, вы сохраните лицензию CC-BY на свою пиктограмму и получите авторство. прямо здесь, на сайте Font Awesome.
Как отправить новые значки
Загрузите шаблон icon-flag. pdf.
Откройте PDF-файл в Adobe Illustrator. Вы заметите, что файл имеет размеры 60×56. Это ровно в 4 раза больше максимальный размер значка 15 в ширину и 14 в высоту. Шаблон представляет собой пример значка флага, который можно использовать в качестве руководства.
Создайте свой значок. Чтобы попасть в набор, ваша иконка должна выглядеть идеально до пикселя. Самый простой способ сделать это делается для того, чтобы ширина линий в шаблоне была кратна 4 пикселям. Диагонали тоже кривые. Не разделяйте пиксели прямо посередине, так как они сильнее размываются при рендеринге. Уменьшите масштаб до 25%, чтобы получить хорошее представление того, как это будет отображаться в шрифте.
Отправьте свой значок. Напишите мне по электронной почте [email protected]. Убедись в использовать тему [Font Awesome] [Icon Contribution] icon-name и прикрепите файл PDF. Если ваш значок попадает в Font Awesome (я очень строго слежу за качеством), я спрошу, какую контактную информацию вы бы нравится использовать для атрибуции.
路线图
下面是将来版本更新的计划。
Упрощенная настройка с помощью пакетов значков.
Еще значки. Есть запросы? Откройте задачу в проекте Font Awesome GitHub.
Хитрости и подсказки для создания потрясающих творческих методов CSS, таких как звездный пример выше.
版权协议
Шрифт Font Awesome распространяется под лицензией SIL Open Font License — http://scripts.sil.org/OFL.
Font Awesome Файлы CSS, LESS и SASS лицензируются в соответствии с лицензией MIT — http://opensource.org/licenses/mit-license.html.
Пиктограммы Font Awesome находятся под лицензией CC BY 3.0 License — http://creativecommons.org/licenses/by/3.0/
Атрибуция больше не требуется в Font Awesome 3. 0, но очень приветствуется: Font Awesome от Dave Gandy — http://fortawesome.github.com/Font-Awesome .
Я ведущий дизайнер продукта в Kyruus. Я просыпаюсь каждый божий день в восторге от своей работы. Почему? Кируус собирается изменить здравоохранение. Без преувеличения.
Kyruus — хорошо финансируемый стартап в области здравоохранения, работающий с большими данными, в Бостоне. Мы считаем, что нужные данные в нужное время может помочь врачам принимать более обоснованные решения. : Мы верим, что данные могут спасти жизни.
Что мне нравится в Кируусе:
Дизайн продукта. Kyruus на высшем уровне стремится к тому, чтобы дизайн продукта был сделан правильно. Это потрясающе.
Назначение. Каждый день я помогаю делать мир лучше — понемногу.
Люди. Я работаю с одними из лучших людей, которых я когда-либо встречал. Больше, чем просто умные люди. Хорошие люди.
Кируусу нужны хорошие люди. Дизайнеры, разработчики приложений, специалисты по работе с большими данными и стажеры, которые несут реальную ответственность. Приходите работать со мной.
Заинтересованы? Напиши мне.

Работайте со мной в Kyruus
Скажи спасибо
Надеюсь, вы думаете, что Font Awesome — это круто. Я потратил сотни часов на проект, чтобы отдать должное сообщество с открытым исходным кодом. Если хотите, вот несколько способов сказать мне спасибо за всю мою тяжелую работу.
Значки вклада
Добавляйте значки, чтобы сделать Font Awesome еще лучше.
Помогите мне купить iMac
Внесите свой вклад в блестящую новый iMac для меня, чтобы продолжать делать отличные иконки.
Мой список желаний Amazon
Или выберите что-то прямое из моего списка желаний. Подарочные карты — это здорово.
Font Awesome, знаковый шрифт, разработанный для использования с Twitter Bootstrap
Один шрифт, 249иконки
В одной коллекции Font Awesome представляет собой пиктографический язык веб-действий.
Управление CSS
Легко настраивайте цвет, размер, тень значка и все, что возможно с помощью CSS.
Бесконечная масштабируемость
Масштабируемая векторная графика означает, что каждая иконка выглядит великолепно в любом размере.
Бесплатно, как в пиве
Font Awesome полностью бесплатен для коммерческого использования. Проверьте лицензию.
Поддержка IE7
Font Awesome поддерживает IE7. Если вам это нужно, примите мои соболезнования.
Идеально подходит для дисплеев Retina
Иконки Font Awesome являются векторными, что означает, что они великолепны на дисплеях с высоким разрешением.
Сделано для Twitter Bootstrap
Разработан с нуля для полной совместимости с Twitter Bootstrap 2.2.2.
Подходит для дизайнеров
Установите FontAwesome.otf и перейдите на страницу копирования и вставки. Удачного проектирования.
Совместимость с программой чтения с экрана
Font Awesome не сбивает с толку программы чтения с экрана, в отличие от других иконочных шрифтов.
Что нового в Font Awesome 3.0
Совершенство пикселей при разрешении 14 пикселей
Каждая иконка воссоздана с нуля, чтобы быть оптимизированной для стандартных 14 пикселей Bootstrap.
Поднастройка шрифта
Благодаря @grantgordon и @johnsmclay вы можете получить только те значки, которые вам нужны.
Улучшенная лицензия
Лицензия на открытый шрифт SIL, лицензия MIT на код. Больше не требуется указание авторства, но мы высоко ценим его.
40 новых иконок в версии 3.
0 Запрошено активным сообществом проекта Font Awesome GitHub.
Новые модели
Новые стили для анимированных вращающихся значков, значков с множителями размера 2x-4x, границ значков и многого другого.
На 28% меньше полезной нагрузки
3.0 меньше, даже с значками на 16% больше. Сумасшедший маленький, если вы подберете только те значки, которые вам нужны.
Новые иконки в версии 3.0
Вы спрашивали, что Font Awesome предлагает 40 блестящих новых иконок в версии 3.0. Новые значки можно запросить на Проект Font Awesome GitHub. Или даже лучше, вы можете добавить свои собственные значки.
icon-cloud-download
icon-cloud-upload
значок-лампочка
обмен иконками
значок-колокольчик-альт
значок-файл-альт
икона пива
значок-кофе
икона-еда
значок-истребитель
icon-user-md
значок-стетоскоп
значок-чемодан
иконостроительный
иконобольница
значок-скорая помощь
значок-аптечка
значок-h-знак
значок-плюс-знак-альт
значок-спиннер
значок-угол-левый
значок-угол-справа
значок-угол-вверх
значок-угол-вниз
значок-двойной угол-левый
значок-двойной угол-вправо
значок-двойной угол-вверх
значок-двойной угол-вниз
значок-круг-пусто
значок-круг
значок-рабочий стол
значок-ноутбук
значок-планшет
значок-мобильный телефон
значок-кавычки слева
значок-кавычки справа
значок-ответ
значок-github-альт
значок-папка-закрыть-альт
icon-folder-open-alt
Значки веб-приложений
значок-регулировка
значок-звездочка
значок-бан-круг
пиктограмма-гистограмма
значок-штрих-код
кубок
икона пива
колокольчик
значок-колокольчик-альт
значок-болт
иконопись
значок-закладка
значок-закладка-пусто
икона-портфель
значок-мегафон
икона-календарь
значок-камера
значок-камера-ретро
значок-сертификат
значок проверки
icon-check-пусто
значок-круг
значок-круг-пусто
значок-облако
icon-cloud-download
icon-cloud-upload
значок-кофе
значок-шестерня
значок-шестерни
значок-комментарий
значок-комментарий-альт
значок-комментарий
значок-комментарии-альт
значок кредитной карты
значок-приборная панель
значок-рабочий стол
значок загрузки
значок загрузки-альт
значок редактирования
значок-конверт
значок-конверт-alt
обмен иконками
значок-восклицательный знак
значок-внешняя-ссылка
значок-закрыть глаза
значок с открытым глазом
значок-facetime-видео
значок-истребитель
значок-пленка
значок-фильтр
икона-огонь
значок-флажок
значок-папка-закрыть
значок-папка-открыть
значок-папка-закрыть-альт
icon-folder-open-alt
икона-еда
икона-подарок
стеклянная икона
значок-глобус
группа иконок
значок жесткого диска
значок-наушники
икона-сердце
icon-heart-пусто
значок-дом
значок-входящие
значок-информация-знак
значок-ключ
иконный лист
icon-ноутбук
icon-legal
значок-лимон
значок-лампочка
значок-замок
значок разблокировки
значок-магия
значок-магнит
значок-карта-маркер
значок-минус
значок-минус
значок-мобильный телефон
значок-деньги
значок-перемещение
икона-музыка
значок выкл.
значок-ОК
значок-ок-круг
значок-ок-знак
значок-карандаш
икона-изображение
значок-самолет
значок-плюс
значок-плюс
пиктограмма
значок-канцелярская кнопка
значок-qrcode
значок-вопрос-знак
значок-кавычки слева
значок-кавычки справа
случайный значок
значок обновления
значок-удалить
значок-удалить-круг
значок-удалить-знак
значок повторного заказа
значок-ответ
изменение размера значка по горизонтали
изменение размера значка по вертикали
значок-ретвит
значок-дорога
значок-rss
значок-скриншот
значок-поиск
пиктограмма
значок-поделиться-альт
иконка-тележка
значок-сигнал
значок входа
значок-вывеска
значок-карта сайта
значок-сортировка
иконка-сортировка
набор иконок
значок-спиннер
значок-звезда
значок-звезда-пусто
значок-звезда-половинка
значок-планшет
значок-тег
теги значков
иконки-задачи
значок-большой палец вниз
значок-большой палец вверх
значок-время
значок-оттенок
значок-корзина
значок-трофей
значок-грузовик
икона-зонт
значок загрузки
icon-upload-alt
значок пользователя
icon-user-md
значок-громкость-выкл
значок-уменьшение громкости
значок-громкость вверх
значок-предупреждающий знак
гаечный ключ
значок-увеличение
значок-уменьшение
Значки текстового редактора
значок-файл
значок-файл-альт
икона
значок-копия
иконо-паста
значок сохранения
значок отмены
значок-повтор
значок-текст-высота
значок-текст-ширина
значок выравнивания по левому краю
выравнивание значков по центру
значок выравнивания по правому краю
выравнивание значков по выравниванию
значок-отступ-влево
значок-отступ-вправо
значок-шрифт
жирный значок
иконка-курсив
перечеркнутый значок
пиктограмма-подчеркивание
значок-ссылка
значок-скрепка
иконки-столбцы
стол-иконка
значок-th-большой
значок-й
значок-список
список иконок
список иконок-ol
список иконок-ul
список иконок-альт
Значки направлений
значок-угол-левый
значок-угол-справа
значок-угол-вверх
значок-угол-вниз
значок-стрелка вниз
значок-стрелка-влево
значок-стрелка-вправо
значок-стрелка вверх
значок каретки вниз
иконка каретки слева
иконка-вставка-справа
пиктограмма вверх
значок-шеврон вниз
значок-шеврон-левый
значок-шеврон-справа
значок-шеврон вверх
значок-круг-стрелка-вниз
значок-круг-стрелка-влево
значок-круг-стрелка-вправо
значок-круг-стрелка вверх
значок-двойной угол-левый
значок-двойной угол-вправо
значок-двойной угол-вверх
значок-двойной угол-вниз
значок-вниз
значок-рука-левая
значок-рука-право
значок-рука вверх
значок-круг
значок-круг-пусто
Значки видеоплеера
значок-игра-круг
игра с иконками
значок-пауза
значок-стоп
значок-шаг назад
значок-быстро-назад
значок-назад
значок-вперед
значок-быстрая перемотка вперед
значок шаг вперед
значок-выброс
полноэкранный значок
значок-изменить размер-полный
значок-изменить размер-маленький
Медицинские иконки
Хотите изменить здравоохранение? Работай со мной в Kyruus.
значок-скорая помощь
кувшин для иконы
значок-h-знак
иконобольница
значок-аптечка
значок-плюс-знак-альт
значок-стетоскоп
icon-user-md
Интеграция
Font Awesome легко интегрировать в Twitter Bootstrap или даже использовать его отдельно.
Easy Bootstrap + Font Awesome Integration
Используйте этот метод для интеграции Font Awesome с Bootstrap CSS по умолчанию.
Скопируйте каталог шрифтов Font Awesome в свой проект.
Скопируйте font-awesome.min.css в свой проект.
Откройте файл font-awesome.min.css вашего проекта и отредактируйте пути к шрифтам, чтобы убедиться, что они указывают на нужное место.
Путь к шрифту указан относительно вашего каталога CSS.
В вашего html, укажите местоположение в файле font-awesome. min.css.

Ознакомьтесь с примерами, чтобы начать использовать Font Awesome!
Custom Bootstrap + Интеграция Font Awesome с использованием LESS
Используйте этот метод для интеграции Font Awesome с Twitter Bootstrap с использованием LESS.
Скопируйте каталог шрифтов Font Awesome в свой проект.
Скопируйте font-awesome.less в каталог bootstrap/less.
Откройте bootstrap.less и замените @import "sprites.less"; с @import "font-awesome.less";
Откройте файл font-awesome.less вашего проекта и отредактируйте переменную @FontAwesomePath , чтобы она указывала на каталог вашего шрифта.
@FontAwesomePath: "../шрифт";
Путь к шрифту указан относительно скомпилированного каталога CSS.
Перекомпилируйте LESS, если используете статический компилятор. В противном случае, вы должны быть в порядке.
Ознакомьтесь с примерами, чтобы начать использовать Font Awesome!
Custom Bootstrap + Font Awesome Integration с использованием SASS или SCSS
Я никогда не использовал их, поэтому дайте мне знать, если у включенных файлов SCSS или SASS есть проблемы.
Не используете Bootstrap?
Font Awesome работает без Twitter Bootstrap.
Скопируйте каталог шрифтов Font Awesome в свой проект.
Скопируйте font-awesome.less или font-awesome.min.css в свой проект.
Откройте файл font-awesome.less или font-awesome.min.css вашего проекта и отредактируйте местоположение шрифта, указав его на каталог шрифтов (см. примеры выше).
Ознакомьтесь с примерами, чтобы начать использовать Font Awesome!
Нужна поддержка IE7?
Font Awesome поддерживает IE7. Если вам это нужно, примите мои соболезнования.
Получите Font Awesome, правильно работающий в современном браузере.
Скопируйте font-awesome-ie7.min.css в свой проект.
В вашего html укажите ссылку на ваш font-awesome-ie7.min.css.

Идите и жалуйтесь тому, кто решил, что вашему проекту нужна поддержка IE7.
Примеры
Многие примеры повторно используются из документации Twitter Bootstrap.
Использовать значки Font Awesome в:
Маркированные списки (как этот)
Кнопки
Группы кнопок
Навигация
Предварительно введенные формы
И многое другое с Custom CSS
Перезагрузить Касса Удалить
Комментарий Настройки Информация
Дом
Библиотека
Приложения
Настройки
Новые стили в версии 3.
0
Используйте несколько новых стилей вместе, и вы получите простые цитаты или отличное изображение для вводной статьи. Или вращающиеся значки для загрузки и обновления контента. Или забавные большие иконки в многострочных кнопках. Много новых возможностей.
Значок счетчика при загрузке содержимого…
Font Awesome
Версия 3.0
Синхронизация содержимого…
Пример HTML
Встроенные значки
Разместите Font Awesome значки практически в любом месте с тегом .
icon-camera-retro
icon-camera-retro
Классы значков отображаются через CSS :before.
Крупные значки
Чтобы увеличить размер значков относительно их контейнера, используйте icon-large , icon-2x , иконка-3x или иконка-4x .
Увеличьте размер значка, используя значок — большой (увеличение на 33%), значок — 2x , icon-3x или icon-4x классов.
значок-камера-ретро
значок-камера-ретро
значок-камера-ретро
значок-камера-ретро

значок-камера-ретро

иконка-камера-ретро

иконка-камера-ретро

иконка-камера-ретро

Если ваши значки обрезаются сверху и снизу, убедитесь, что у вас есть достаточная высота строки.
Анимированный счетчик
Используйте класс icon-spin , чтобы заставить любую иконку вращаться. Лучше всего работает с значок-спиннер и значок обновления .
Значок счетчика при загрузке содержимого…
Значок счетчика при загрузке содержимого...
Анимации CSS3 не поддерживаются в IE7–IE9.
Значки с рамками и вытянутыми
Используйте icon-border и pull-right или pull-left для удобного извлечения котировок или графика статьи.
Используйте несколько новых стилей вместе, и вы получите простые цитаты или отличное изображение для вводной статьи. Или вращающиеся значки для загрузки и обновления контента. Или забавные большие иконки в многострочных кнопках. Вы можете комбинировать все из них в любой комбинации, чтобы получить массу новых возможностей.
Используйте несколько новых стилей вместе... масса новых возможностей.
Используйте несколько новых стилей вместе, и вы получите простые цитаты или отличное изображение для вводной статьи. Или вращающиеся значки для загрузки и обновления контента. Или забавные большие иконки в многострочных кнопках. Вы можете комбинировать все из них в любой комбинации, чтобы получить массу новых возможностей.
Используйте несколько новых стилей вместе... масса новых возможностей.
Кнопки
Перезагрузить Касса
Комментарий Информация
Удалить Настройки
Font Awesome
Версия 3. 0
Синхронизация содержимого…
Иконки Font Awesome прекрасно работают с кнопками. Вы даже можете комбинировать их с более крупными стилями значков, pull-right и pull-left и icon-spin .
Перезагрузить <а href="#"> Оформить заказ <а href="#"> Комментарий <а href="#"> Информация <а href="#"> Удалить <а href="#"> Настройки <а href="#"> Font Awesome
Версия 3.0 <а href="#"> Синхронизация содержимого...
Группы кнопок

Выпадающие списки кнопок

Пользователь <ул>
Изменить

Удалить

Запрет

Сделать администратором

Не забудьте добавить соответствующий JavaScript, чтобы включить раскрывающиеся списки кнопок.
Списки
Списки
Кнопки
Группы кнопок
Навигация
Предварительно введенные формы
Простая замена отдельных патронов.
<ул>
Списки

Кнопки

Группы кнопок

Навигация

Предварительные вводы формы

Навигация
Дом
Библиотека
Приложения
Настройки
Используйте значки Font Awesome в навигации для предоставления полезных визуальных подсказок.
<ул>
Главная страница

Библиотека

Приложения

Настройки

Предварительно введенные формы
<форма> <дел>