Главная » Bootstrap » Уроки Bootstrap 3.0 для начинающих (9-й урок) – шрифтовые иконки Font Awesome

Уроки Bootstrap 3.0 для начинающих (9-й урок) – шрифтовые иконки Font Awesome

2015-06-20 / Вр:23:20 / просмотров: 12470

Существует два способа подключения шрифтов Font Awesome на веб-сайт.

○ Первый способ.
Он самый быстрый. Это прямое подключение на веб ресурс. Установите подключение между тегами <head> </head>:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

○ Второй способ.
Для этого скачайте файл с официального сайта и установите путь к файлу «font-awesome.min.css» между тегами <head> </head>. Или можете скачать этот файл на моем блоге – на свое усмотрение я убрал там все лишнее.

Если вы скачали файл на моем блоге, разархивируйте архив и установите папку в корень сайта. Путь к файлу «font-awesome.min.css» будет таким:

<link href="font-Awesome/css/font-awesome.min.css" rel="stylesheet">

○ Как использовать иконки шрифта Font Awesome на Bootstrap?

Вы можете поместить иконки Awesome в любое месте, используя CSS префикс fa и имя иконки. Имена иконок можно посмотреть на сайте.

Префикс fa и имя иконки используется в паре с тегом <i> или <span>:

<i class="fa fa-user-plus"></i> Добавить юзера

Или так:

<span class="fa fa-user-plus"></span> Добавить юзера

Результат будет вот таким:

Как использовать иконки шрифта Font Awesome на Bootstrap?

○ Как увеличить иконки шрифта Font Awesome на Bootstrap?

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

<i class="fa fa-user-plus fa-lg"></i> fa-lg
<i class="fa fa-user-plus fa-2x"></i> fa-2x
<i class="fa fa-user-plus fa-3x"></i> fa-3x
<i class="fa fa-user-plus fa-4x"></i> fa-4x
<i class="fa fa-user-plus fa-5x"></i> fa-5x

В результате:

Как увеличить иконки шрифта Font Awesome на Bootstrap?

○ Иконки шрифта Font Awesome с фиксированной величиной

Достаточно добавить к иконкам класс fa-fw:

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>  Главная</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>  Книги</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>  Статьи</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>  Настройки</a>
</div>

Результат:

○ Иконки для маркированных списков

Если установить класс fa-ul и fa-li, вы сможете заменить стандартные маркеры в списках на любые другие иконки:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-eur"></i>eur</li>
  <li><i class="fa-li fa fa-usd"></i>usd</li>
  <li><i class="fa-li fa fa-rub"></i>rub</li>
  <li><i class="fa-li fa fa-check-square"></i>ОК</li>
</ul>

Результат:

Иконки для маркированных списков

○ Обтекание иконок вокруг текста

Чтобы сделать обтекание иконок, вставьте к иконкам такие классы:

pull-right (справа иконка, слева текст)

pull-left (справа текст, слева иконка)

<i class="fa fa-eur fa-3x pull-right"></i> Любой текст. Для примера я напишу текст, в котором нет смысла.

Результат:

Обтекание иконок вокруг текста

○ Анимационные (вращающиеся) иконки

Чтобы иконки вращались вокруг своей оси, используют класс «fa-spin»

<ul class="fa-ul">
  <li><i class="fa-li fa fa-eur fa-spin"></i>eur</li>
  <li><i class="fa-li fa fa-usd fa-spin"></i>usd</li>
  <li><i class="fa-li fa fa-rub fa-spin"></i>rub</li>
  <li><i class="fa-li fa fa-check-square fa-spin"></i>ОК</li>
</ul>

[посмотреть результат]

○ Создание повернутых и зеркально отраженных иконок

Чтобы повернуть иконку, используют класс «fa-rotate-*». Вместо «*» нужно указать, насколько градусов развернуть иконку (0⁰, 90⁰,180⁰,270⁰)

Чтобы отразить иконку зеркально, используют класс «fa-flip-*». Вместо «*» нужно указать, как отразить (horizontal – горизонтально, vertical - вертикально).

<i class="fa fa-shield"></i> иконка<br>
<i class="fa fa-shield fa-rotate-90"></i> иконка, повернутая на 90 градусов по часовой стрелки<br>
<i class="fa fa-shield fa-rotate-180"></i> иконка, повернутая на 180 градусов по часовой стрелки<br>
<i class="fa fa-shield fa-rotate-270"></i> иконка, повернутая на 270 градусов по часовой стрелки<br>
<i class="fa fa-shield fa-flip-horizontal"></i> иконка,отраженная по горизонтали<br>
<i class="fa fa-shield fa-flip-vertical"></i> иконка, отраженная по вертикали

Результат:

Создание повернутых и зеркально отраженных иконок

○ Иконка с наложением друг на друга:

Если нужно наложить несколько иконок друг на друга (в основном, это две-три иконки), используйте класс "fa-stack" на родительском элементе, класс "fa-stack-1x" для иконки, который расположен на переднем плане и класс "fa-stack-2x" для иконки, расположенной на заднем плане.

<i class="fa fa-camera"></i> фотоапарат<br>
<i class="fa fa-ban"></i> знак запрета<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" style="color:#cc0000;"></i>
</span>

Результат:

Иконка с наложением друг на друга