BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

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

<link href="http://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>

Результат:

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

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

Если установить класс 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-*». Вместо «*» нужно указать, насколько градусов развернуть иконку (00, 900,1800,2700)

Чтобы отразить иконку зеркально, используют класс «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>

Результат:

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

 

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 747
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 4092