Font Awesome

Шрифтовые иконки для
использования с Twitter Bootstrap

Версия 3.0.2 • 3.1.1 • Создана & Поддерживается Дейвом Ганди (Dave Gandy)
Смотреть 9000+ Форкнуть 800+

Один шрифт, 249 иконок

Все в одном файле, Font Awesome - это язык иконок для Ваших web-проектов.

Управление через CSS

Изменяйте цвет, размер, тень, и все что возможно изменить через CSS.

Бесконечная масштабируемость

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

На халяву!

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

Работает в IE7

Font Awesome работает в IE7. Мои соболезнования если это важно для Вас.

Отлично подходит для Retina дисплеев

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

Сделан для Twitter Bootstrap

Создан совместно и для использования с Twitter Bootstrap.

Дизайнеры оценят

Установите FontAwesome.otf и посетите страницу копи-паст. Удачи с дизайном.

Поддерживается читалками

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

Каждый пиксель на месте

Каждая иконка индивидуально перерисована для совместимости со стандартным размером шрифта в Bootstrap'е в 14px.

Собери свой

Спасибо @grantgordon и @johnsmclay, благодаря этим ребятам Вы можете самостоятельно собрать свой комплект из иконок, которые нужны только Вашему проекту.

Наша лицензия лучше

SIL open font license для дизайна, MIT license для кодинга. Ссылка на проект больше не обязательна, НО приветствуется.

40 новых иконок, в новой версии 3.0

Мы сделали все что было запрошено со стороны нашего сообщества Font Awesome GitHub.

Новые стили

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

Уменьшен размер на 28%

Версия 3.0 весит меньше, несмотря на прирост в 16% в количестве иконок. И супер-маленький размер при самостоятельной сборке.

Вы просили, - мы сделали. Font Awesome поставляется с 40 новыми иконками. Вам нужно что-то еще? Запросите новые иконки на странице сообщества. Все будут рады если Вы добавите свои собственные иконки.

  • icon-cloud-download
  • icon-cloud-upload
  • icon-lightbulb
  • icon-exchange
  • icon-bell-alt
  • icon-file-alt
  • icon-beer
  • icon-coffee
  • icon-food
  • icon-fighter-jet
  • icon-user-md
  • icon-stethoscope
  • icon-suitcase
  • icon-building
  • icon-hospital
  • icon-ambulance
  • icon-medkit
  • icon-h-sign
  • icon-plus-sign-alt
  • icon-spinner
  • icon-angle-left
  • icon-angle-right
  • icon-angle-up
  • icon-angle-down
  • icon-double-angle-left
  • icon-double-angle-right
  • icon-double-angle-up
  • icon-double-angle-down
  • icon-circle-blank
  • icon-circle
  • icon-desktop
  • icon-laptop
  • icon-tablet
  • icon-mobile-phone
  • icon-quote-left
  • icon-quote-right
  • icon-reply
  • icon-github-alt
  • icon-folder-close-alt
  • icon-folder-open-alt
  • icon-adjust
  • icon-asterisk
  • icon-ban-circle
  • icon-bar-chart
  • icon-barcode
  • icon-beaker
  • icon-beer
  • icon-bell
  • icon-bell-alt
  • icon-bolt
  • icon-book
  • icon-bookmark
  • icon-bookmark-empty
  • icon-briefcase
  • icon-bullhorn
  • icon-calendar
  • icon-camera
  • icon-camera-retro
  • icon-certificate
  • icon-check
  • icon-check-empty
  • icon-circle
  • icon-circle-blank
  • icon-cloud
  • icon-cloud-download
  • icon-cloud-upload
  • icon-coffee
  • icon-cog
  • icon-cogs
  • icon-comment
  • icon-comment-alt
  • icon-comments
  • icon-comments-alt
  • icon-credit-card
  • icon-dashboard
  • icon-desktop
  • icon-download
  • icon-download-alt
  • icon-edit
  • icon-envelope
  • icon-envelope-alt
  • icon-exchange
  • icon-exclamation-sign
  • icon-external-link
  • icon-eye-close
  • icon-eye-open
  • icon-facetime-video
  • icon-fighter-jet
  • icon-film
  • icon-filter
  • icon-fire
  • icon-flag
  • icon-folder-close
  • icon-folder-open
  • icon-folder-close-alt
  • icon-folder-open-alt
  • icon-food
  • icon-gift
  • icon-glass
  • icon-globe
  • icon-group
  • icon-hdd
  • icon-headphones
  • icon-heart
  • icon-heart-empty
  • icon-home
  • icon-inbox
  • icon-info-sign
  • icon-key
  • icon-leaf
  • icon-laptop
  • icon-legal
  • icon-lemon
  • icon-lightbulb
  • icon-lock
  • icon-unlock
  • icon-magic
  • icon-magnet
  • icon-map-marker
  • icon-minus
  • icon-minus-sign
  • icon-mobile-phone
  • icon-money
  • icon-move
  • icon-music
  • icon-off
  • icon-ok
  • icon-ok-circle
  • icon-ok-sign
  • icon-pencil
  • icon-picture
  • icon-plane
  • icon-plus
  • icon-plus-sign
  • icon-print
  • icon-pushpin
  • icon-qrcode
  • icon-question-sign
  • icon-quote-left
  • icon-quote-right
  • icon-random
  • icon-refresh
  • icon-remove
  • icon-remove-circle
  • icon-remove-sign
  • icon-reorder
  • icon-reply
  • icon-resize-horizontal
  • icon-resize-vertical
  • icon-retweet
  • icon-road
  • icon-rss
  • icon-screenshot
  • icon-search
  • icon-share
  • icon-share-alt
  • icon-shopping-cart
  • icon-signal
  • icon-signin
  • icon-signout
  • icon-sitemap
  • icon-sort
  • icon-sort-down
  • icon-sort-up
  • icon-spinner
  • icon-star
  • icon-star-empty
  • icon-star-half
  • icon-tablet
  • icon-tag
  • icon-tags
  • icon-tasks
  • icon-thumbs-down
  • icon-thumbs-up
  • icon-time
  • icon-tint
  • icon-trash
  • icon-trophy
  • icon-truck
  • icon-umbrella
  • icon-upload
  • icon-upload-alt
  • icon-user
  • icon-user-md
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-warning-sign
  • icon-wrench
  • icon-zoom-in
  • icon-zoom-out
  • icon-file
  • icon-file-alt
  • icon-cut
  • icon-copy
  • icon-paste
  • icon-save
  • icon-undo
  • icon-repeat
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-indent-left
  • icon-indent-right
  • icon-font
  • icon-bold
  • icon-italic
  • icon-strikethrough
  • icon-underline
  • icon-link
  • icon-paper-clip
  • icon-columns
  • icon-table
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-list
  • icon-list-ol
  • icon-list-ul
  • icon-list-alt
  • icon-angle-left
  • icon-angle-right
  • icon-angle-up
  • icon-angle-down
  • icon-arrow-down
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-caret-down
  • icon-caret-left
  • icon-caret-right
  • icon-caret-up
  • icon-chevron-down
  • icon-chevron-left
  • icon-chevron-right
  • icon-chevron-up
  • icon-circle-arrow-down
  • icon-circle-arrow-left
  • icon-circle-arrow-right
  • icon-circle-arrow-up
  • icon-double-angle-left
  • icon-double-angle-right
  • icon-double-angle-up
  • icon-double-angle-down
  • icon-hand-down
  • icon-hand-left
  • icon-hand-right
  • icon-hand-up
  • icon-circle
  • icon-circle-blank
  • icon-play-circle
  • icon-play
  • icon-pause
  • icon-stop
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-fullscreen
  • icon-resize-full
  • icon-resize-small
  • icon-phone
  • icon-phone-sign
  • icon-facebook
  • icon-facebook-sign
  • icon-twitter
  • icon-twitter-sign
  • icon-github
  • icon-github-alt
  • icon-github-sign
  • icon-linkedin
  • icon-linkedin-sign
  • icon-pinterest
  • icon-pinterest-sign
  • icon-google-plus
  • icon-google-plus-sign
  • icon-sign-blank
  • icon-ambulance
  • icon-beaker
  • icon-h-sign
  • icon-hospital
  • icon-medkit
  • icon-plus-sign-alt
  • icon-stethoscope
  • icon-user-md

Интегрировать Font Awesome очень просто в Twitter Bootstrap, а так же использовать отдельно на ваше усмотрение.

Bootstrap + Font Awesome

Используйте Font Awesome с Bootstrap CSS.

  1. Скопируйте папку со шрифтами Font Awesome в Ваш проект.
  2. Затем скопируйте font-awesome.min.css в Ваш проект.
  3. Откройте файл font-awesome.min.css и отредактируйте путь к файлам со шрифтами, если это необходимо.

    Папка со шрифтами находится относительно (выше) директории с CSS-файлами.

  4. Внутри тега <head> Вашей html-страницы, поместите ссылку на font-awesome.min.css.
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
    
  5. Обратите внимание на примеры использования Font Awesome перед началом работы над своим проектом!

Кастомная интеграция Bootstrap + Font Awesome с использованием LESS

Используйте этот метод для интеграции Font Awesome в Twitter Bootstrap используя LESS.

  1. Скопируйте папку со шрифтами Font Awesome в Ваш проект.
  2. Затем скопируйте font-awesome.less в директорию bootstrap/less.
  3. Откройте bootstrap.less и замените @import "sprites.less"; на @import "font-awesome.less";
  4. Откройте файл font-awesome.less и отредактируйте переменную @FontAwesomePath так что бы она указывала на директорию со шрифтами.
    @FontAwesomePath:   "../font";
    

    Папка со шрифтами находится относительно (выше) директории с скомпилированными CSS-файлами.

  5. Перекомпилируйте Ваш LESS в случае использования статичного компилятора. В другом случае все готово к работе.
  6. Обратите внимание на примеры использования Font Awesome перед началом работы над своим проектом!

Кастомная интеграция Bootstrap + Font Awesome Integration используя SASS или SCSS

Никогда не пробовал использовать это в живом проекте, так что дайте знать, если найдете ошибки в SCSS или SASS файлах.

Не используете Bootstrap?

Font Awesome - работает и без использования Twitter Bootstrap.

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

Требуется поддержка IE7?

Font Awesome работает в IE7. Мои соболезнования если это важно для Вас.

  1. Добавьте файл font-awesome-ie7.min.css в папку Вашего проекта.
  2. В теге <head> Вашей html страницы, добавьте ссылку на font-awesome-ie7.min.css.
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
    <!--[if IE 7]>
    <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
    <![endif]-->
    
  3. Теперь можно звонить тем кто требовал поддержку в IE7.

Много-много примеров в стиле Twitter Bootstrap.

Используйте наши иконки в:

  • Списки (как этот)
  • Кнопки
  • Группы кнопок
  • Навигация
  • Пред- и пост- идущие элементы в input
  • И много другого в вашем CSS
Используйте множество классов в одном элементе, для создания цитаты как в этом примере. Или анимирование иконки для отображения процесса загрузки или обновления. Либо просто комбинируйте классы для создания своего уникального стиля.
Крутящаяся иконка во время загрузки...

Строчные иконки

Поместите тег <i> иконки Font Awesome рядом с любым элементом или в тексте.

icon-camera-retro
<i class="icon-camera-retro"></i> icon-camera-retro
Иконки появляются через псевдо-CSS-селектор :before.

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

Для увеличения иконки до размеров родительского элемента, используйте классы icon-large, icon-2x, icon-3x или icon-4x.

Увеличьте размер иконки используя класс icon-large (33% увеличение), icon-2x, icon-3x либо icon-4x.

icon-camera-retro

icon-camera-retro

icon-camera-retro

icon-camera-retro

<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
Если ваши иконки обрезаются по краям - убедитесь в корректной установке line-height.

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

Используйте класс icon-spin - и Ваша иконка будет крутится. Рекомендуем использовать с icon-spinner и icon-refresh.

Кручусь-верчусь - контент гружусь...
<i class="icon-spinner icon-spin"></i> Кручусь-верчусь - контент гружусь...

CSS3-анимация не работает в IE7 - IE9.

Границы & Впуклые иконки

Используйте классы icon-border и pull-right, либо pull-left для цитат и заглавных иконок в тексте.

Используйте множество классов в одном элементе, для создания цитаты как в этом примере. Или анимирование иконки для отображения процесса загрузки или обновления. Либо просто комбинируйте классы для создания своего уникального стиля.
<i class="icon-quote-left icon-4x pull-left icon-muted"></i>
Используйте множество классов в одном элементе ... создания своего уникального стиля.
Используйте множество классов в одном элементе, для создания цитаты как в этом примере. Или анимирование иконки для отображения процесса загрузки или обновления. Либо просто комбинируйте классы для создания своего уникального стиля.
<i class="icon-flag icon-4x pull-left icon-border"></i>
Используйте множество классов в одном элементе ... создания своего уникального стиля.

Кнопки

Иконки Font Awesome отлично подходят для использования с кнопками. Вы так же можете использовать большие иконки и кнопки, и классы: pull-right, pull-left, icon-spin.

<a class="btn" href="#">
  <i class="icon-repeat"></i> Перезагрузить</a>
<a class="btn btn-success" href="#">
  <i class="icon-shopping-cart icon-large"></i> Checkout</a>
<a class="btn btn-large btn-primary" href="#">
  <i class="icon-comment"></i> Комментировать</a>
<a class="btn btn-small btn-info" href="#">
  <i class="icon-info-sign"></i> Info</a>
<a class="btn btn-danger" href="#">
  <i class="icon-trash icon-large"></i> Удалить</a>
<a class="btn btn-small" href="#">
  <i class="icon-cog"></i> Настройки</a>
<a class="btn btn-large btn-danger" href="#">
  <i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version 3.0</a>
<a class="btn btn-primary" href="#">
  <i class="icon-refresh icon-spin"></i> Синхронизация...</a>

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

<div class="btn-group">
  <a class="btn" href="#"><i class="icon-align-left"></i></a>
  <a class="btn" href="#"><i class="icon-align-center"></i></a>
  <a class="btn" href="#"><i class="icon-align-right"></i></a>
  <a class="btn" href="#"><i class="icon-align-justify"></i></a>
</div>

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

<div class="btn-group open">
    <a class="btn btn-primary" href="#"><i class="icon-user"></i> Профиль</a>
    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="icon-caret-down"></span></a>
    <ul class="dropdown-menu">
        <li><a href="#"><i class="icon-pencil"></i> Редактировать</a></li>
        <li><a href="#"><i class="icon-trash"></i> Удалить</a></li>
        <li><a href="#"><i class="icon-ban-circle"></i> Забанить</a></li>
        <li class="divider"></li>
        <li><a href="#"><i class="i"></i> Сделать админом</a></li>
    </ul>
</div>
Не забудьте добавьте JavaScript для активации выпадающих списков.

Списки

  • Списки
  • Кнопки
  • Группы кнопок
  • Навигация
  • Пост- и пред- идущие элементы

Замените знак списка своим собственным.

<ul class="icons">
  <li><i class="icon-ok"></i> Списки</li>
  <li><i class="icon-ok"></i> Кнопки</li>
  <li><i class="icon-ok"></i> Группы кнопок</li>
  <li><i class="icon-ok"></i> Навигация</li>
  <li><i class="icon-ok"></i> Пост- и пред- идущие элементы</li>
</ul>

Навигация

Используйте иконки в навигации для визуализации пунктов меню.

<ul class="nav nav-list">
  <li class="active"><a href="#"><i class="icon-home"></i> На главную</a></li>
  <li><a href="#"><i class="icon-book"></i> Библиотека</a></li>
  <li><a href="#"><i class="icon-pencil"></i> Приложения</a></li>
  <li><a href="#"><i class="icon-cogs"></i> Настройки</a></li>
</ul>

Пост- и пред- идущие элементы

<form>
  <div class="input-prepend">
    <span class="add-on"><i class="icon-envelope"></i></span>
    <input class="span2" type="text" placeholder="Email">
  </div>
  <div class="input-prepend">
    <span class="add-on"><i class="icon-key"></i></span>
    <input class="span2" type="password" placeholder="Пароль">
  </div>
</form>

Кастомный CSS

Все что возможно сделать при помощи CSS, можно применить к Font Awesome.

Звёздный рейтинг (Вдохновение от CSS Tricks)

Хотите помочь нам создавать иконки? Вы можете создать свои иконки и мы их добавим - присоединяйтесь к нашему сообществу на GitHub.

Как добавить новые иконки?

  1. Скачайте icon-flag.pdf шаблон.
  2. Откройте PDF в Adobe Illustrator. Имейте в виду файл имеет размер 60x56. Это в 4x кратный размер, от стандартного, шириной в 15 и высотой в 14. Шаблон это пример иконки "flag" используйте его как заготовку.
  3. Нарисуйте иконку, убедитесь что она идеальна. Как минимум каждая линия в Вашей заготовке должна быть не менее 4px. Не делите иконку и пиксели ровно по середине, они будут смазаны во время рендирования. Выставьте зум на 25% для представления как иконка будет выглядеть после рендирования.
  4. Отправьте свою иконку. Скидывайте на мыло Дейву dave@davegandy.com. Убедитесь что тема письма соответствует следующему шаблону: [Font Awesome] [Icon Contribution] icon-name, не забудьте прикрепить совой pdf-файл с иконкой. Если Ваша иконка будет добавлена в Font Awesome (Дейв слишком перфекционист и применяет большие требования к каждой иконке), - Дейв свяжется с Вами для уточнения контактной информации, которая будет добавлена в информацию о создателях шрифта.

Ниже план на будущее.

Я (Dave Gandy) ведущий дизайнер в Kyruus. Я (Dave Gandy) просыпаюсь каждый день вдохновленный своей работой. Почему? Kyruus - изменит систему здравоохранения. Без преувеличений.

Kyruus это хорошо финансируемый, стартап направленный на улучшение здравоохранения в Бостоне (Boston). Мы верим в то что правильная информация доставленная в правильное время (быстро) поможет врачам делать правильные решения. Мы верим что можем сохранить людям жизнь.

Что мы любим в Kyruus:
  • Дизайн. В любой сфере работы компании дизайн стоит на первом месте. Он безупречен.
  • Цель. Каждый день, каждый день я (Dave) просыпаюсь что бы сделать этот мир лучше.
  • Люди. Я работаю с лучшими людьми. Которые больше чем умные люди. Хорошие люди.

В Kyruus требуются хорошие люди. Дизайнеры, разработчики приложений, мастера по работе с большими данными, & интерны. Присоединяйтесь и работайте со мной.

Заинтересованы? Напишите Дейву.

Надеюсь Вы думаете что Font Awesome - аху**ый. Я потратил сотни часов работая над этим шрифтом, создав опен-сорс сообщество и работая совместно с людьми. .

Чем помочь?

Распространяйте иконки для того что бы Font Awesome стал более популярным.

Помогите Дейву купить iMac

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

Лист желаний Дейва на Amazon

Выберите что-то конкретное из листа желаний Дейва в качестве благодарности.