Font Awesome

Font Awesome

Шрифтовые иконки совместимые с Twitter Bootstrap

   Скачать
Посмотреть на GitHub   ·   Версия   ·   Создан и Поддерживатеся Дейвом Ганди (Dave Gandy)

После установки, Вы можете использовать иконки Font Awesome используя тег <i>. Большинство иконог заимствовано и совместимо с Twitter Bootstrap.

Новые стили в

Повернутые или перевернутые

  Нормальное положение
  icon-rotate-90
  icon-rotate-180
  icon-rotate-270
  icon-flip-horizontal (перевернут по горизонтали)
  icon-flip-vertical (перевернут по вертикали)

Совмещенные иконки

icon-twitter и icon-check-empty
icon-flag и icon-circle
icon-terminal и icon-sign-blank

Улучшенный список

  • Новый список
  • Исправлены старые баги
  • Оптимизированный размер шрифта

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

Используйте иконки Font Awesome в тексте, используя тег <i>.

icon-camera-retro 
1
<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

1
2
3
4
<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-border и pull-right или pull-left для выравнивания иконки по левому или правому краю родительского элемента.

Комбинируйте новые стили для создания уникальных и подходящих имено для Вашему проекту иконок. Используйте анимацию. Смешные большие и много-строчные иконки. Совмещая классы и стили перед Вами предстают большие возможности для использования иконок в различных местах и проектах. 
1
2
<i class="icon-quote-left icon-4x pull-left icon-muted"></i>
 Совмещая классы и стили перед Вами предстают большие возможности...
Комбинируйте новые стили для создания уникальных и подходящих имено для Вашему проекту иконок. Используйте анимацию. Смешные большие и много-строчные иконки. Совмещая классы и стили перед Вами предстают большие возможности для использования иконок в различных местах и проектах. 
1
2
<i class="icon-flag icon-4x pull-left icon-border"></i>
 Совмещая классы и стили перед Вами предстают большие возможности...

Кнопки

Перезагрузить Корзина

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

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

Font Awesome
Версия

Синхронизация...

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<a class="btn" href="#">
  <i class="icon-repeat"></i> Перезагрузить</a>
<a class="btn btn-success" href="#">
  <i class="icon-shopping-cart icon-large"></i> Корзина</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> Информация</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>Версия </a>
<a class="btn btn-primary" href="#">
  <i class="icon-refresh icon-spin"></i> Синхронизация...</a>

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

1
2
3
4
5
6
<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>

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

Пользователь 
1
2
3
4
5
6
7
8
9
10
11
12
<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-fixed-width icon-pencil"></i> Редактровать</a></li>
    <li><a href="#"><i class="icon-fixed-width icon-trash"></i> Удалить</a></li>
    <li><a href="#"><i class="icon-fixed-width icon-ban-circle"></i> Заблокировать</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Сделать админом</a></li>
  </ul>
</div>
Не забудьте об JavaScript'е используемом в Twitter Bootstrap для активации выпадающих списков.

Список

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

Список с иконками.

1
2
3
4
5
6
7
8
<ul class="icons-ul">
  <li><i class="icon-li icon-ok"></i>Список, например как этот</li>
  <li><i class="icon-li icon-ok"></i>Кнопки</li>
  <li><i class="icon-li icon-ok"></i>Группы кнопок</li>
  <li><i class="icon-li icon-ok"></i>Навигация</li>
  <li><i class="icon-li icon-ok"></i>Пред- и пост-идущие элементы</li>
  <li><i class="icon-li icon-ok"></i>&hellip;И еще много нового</li>
</ul>

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

1
2
3
4
5
6
7
8
9
10
<form>
  <div class="input-prepend">
    <span class="add-on"><i class="icon-envelope"></i></span>
    <input class="span2" type="text" placeholder="Email address">
  </div>
  <div class="input-prepend">
    <span class="add-on"><i class="icon-key"></i></span>
    <input class="span2" type="password" placeholder="Password">
  </div>
</form>

Анимированный спиннер

Используйте класс icon-spin. Например с иконкой icon-spinner или icon-refresh.
Загрузка... 
1
<i class="icon-spinner icon-spin icon-large"></i> Загрузка...

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

Повернутые или перевернутые

Классы используемые для поворота или переворота (отражение) иконок.
  Нормальное положение
  icon-rotate-90
  icon-rotate-180
  icon-rotate-270
  icon-flip-horizontal (отражение по горизонтали)
  icon-flip-vertical (отражение по вертикали) 
1
2
3
4
5
6
<i class="icon-shield"></i>&nbsp; Нормальное положение<br>
<i class="icon-shield icon-rotate-90"></i>&nbsp; icon-rotate-90<br>
<i class="icon-shield icon-rotate-180"></i>&nbsp; icon-rotate-180<br>
<i class="icon-shield icon-rotate-270"></i>&nbsp; icon-rotate-270<br>
<i class="icon-shield icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal<br>
<i class="icon-shield icon-flip-vertical"></i>&nbsp; icon-flip-vertical

Поворот и отражение не поддерживаются в IE7.

Совмещенные иконки

Метод для совмещения множества иконок в одну новую. Используйте класс icon-stack в родительском элементе и класс icon-stack-base для нижней иконки.
icon-twitter на icon-check-empty
icon-flag на icon-circle
icon-terminal на icon-sign-blank 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<span class="icon-stack">
  <i class="icon-check-empty icon-stack-base"></i>
  <i class="icon-twitter"></i>
</span>
icon-twitter на icon-check-empty<br>
<span class="icon-stack">
  <i class="icon-circle icon-stack-base"></i>
  <i class="icon-flag icon-light"></i>
</span>
icon-flag на icon-circle<br>
<span class="icon-stack">
  <i class="icon-sign-blank icon-stack-base"></i>
  <i class="icon-terminal icon-light"></i>
</span>
icon-terminal на icon-sign-blank

Не стандартный CSS

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

Рейтинг (вдохновение от CSS Tricks)