Навигация Содержание
  1. Главная
  2. HTML и CSS

Bootstrap 3 - Иконки Font Awesome

Александр Мальцев
Александр Мальцев
60K
23
Содержание:
  1. Комментарии

Установка шрифта

Чтобы подключить шрифт Font Awesome на свой веб-сайт вы можете воспользоваться двумя способами:

  • Самый простой способ – это с помощью Bootstrap CDN. Для этого необходимо добавить одну строчку кода в раздел заголовка сайта. Ни чего загружать и устанавливать не надо. 
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
  • Второй способ заключается в скачивании шрифта Awesome со страницы проекта, его распаковки в каталог сайта и подключения CSS файла "font-awesome.min.css". 
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
    Готовую сборку с платформой Twitter Bootstrap 3 можете скачать по ссылке.

Использование иконок шрифта Awesome

Вы можете поместить иконки Awesome практически в любом месте, используя CSS префикс fa и имя иконки, которые расположены на сайте. Шрифт Awesome предназначен для использования со строчными элементами HTML (можно использовать тег <i> для краткости, но использование тега <span> семантически более правильно).

<i class="fa fa-camera-retro"></i> fa-camera-retro

Выше приведенный код будет выглядеть примерно так:

fa-camera-retro

Создание иконок увеличенного размера

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

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

Создание иконок с фиксированной шириной

Иконки с фиксированной шириной очень полезны при создании навигационных меню или различных списков. Чтобы создать такие иконки, используйте класс 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-check-square"></i>Иконки Awesome</li>
  <li><i class="fa-li fa fa-check-square"></i>могут использоваться</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>как маркеры</li>
  <li><i class="fa-li fa fa-square"></i>неупорядоченных списков</li>
</ul>

  • Иконки Awesome
  • могут использоваться
  • как маркеры
  • неупорядоченных списков

Создание «вытянутых» иконок

Для создания «вытянутых» кавычек или иконок статей используйте классы fa-border и pull-right или pull-left.

<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
...Креативность — это просто создание связей между вещами. Когда творческих людей спрашивают, как они что-то сделали, они чувствуют себя немного виноватыми, потому что они не сделали ничего на самом деле, а просто заметили. Это становится им понятно со временем. Они смогли связать разные кусочки своего опыта и синтезировать что-то новое. Это происходит потому, что они пережили и увидели больше, чем другие, или потому, что они больше об этом размышляют.

...Креативность — это просто создание связей между вещами. Когда творческих людей спрашивают, как они что-то сделали, они чувствуют себя немного виноватыми, потому что они не сделали ничего на самом деле, а просто заметили. Это становится им понятно со временем. Они смогли связать разные кусочки своего опыта и синтезировать что-то новое. Это происходит потому, что они пережили и увидели больше, чем другие, или потому, что они больше об этом размышляют.

Создание вращающихся иконок

Для создания вращающейся иконки используйте класс fa-spin.

<button type="button" class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i></button>
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-circle-o-notch fa-spin"></i></button>
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-refresh fa-spin"></i></button>
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-cog fa-spin"></i></button>

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

Чтобы повернуть и зеркально отразить иконки, используйте следующие классы fa-rotate-* и fa-flip-*.

<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> иконка, отраженная по вертикали

иконка
иконка, повернутая на 90 градусов по часовой стрелки
иконка, повернутая на 180 градусов по часовой стрелки
иконка, повернутая на 270 градусов по часовой стрелки
иконка,отраженная по горизонтали
иконка, отраженная по вертикали

Иконки, наложенные друг на друга

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

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
иконка "Twitter" на иконке "квадрата"<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
иконка "флага" на иконке "круга"<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
иконка "терминала" на иконке "квадрата"<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"></i>
</span>
иконка "запрещено" на иконке "камеры"

иконка "Twitter" на иконке "квадрата"
иконка "флага" на иконке "круга"
иконка "терминала" на иконке "квадрата"
иконка "запрещено" на иконке "камеры"

Комментарии: 23

  1. Ildar
    Ildar
    2020-05-14 19:40:29
    А подскажите, пожалуйста, как можно подключить иконки с цифрами 1. 2. и тд.? Имею ввиду на что ссылаться через CDN в стандартных их нет.
  1. Александр Мальцев
    Александр Мальцев
    2020-05-17 10:58:08
    Иконок с цифрами в Font Awesome нет. Вам нужно найти другой шрифт, в котором они есть и подключить к странице.
    Например, в UTF-8 есть такие символы с цифрами.
    Добавить их через CSS, например, к элементам списка можно так:
    <style>
li {
  list-style: none;
}
li:nth-child(1)::before {
  content: '\2776';
}
li:nth-child(2)::before {
  content: '\2777';
}
li:nth-child(3)::before {
  content: '\2778';
}
</style>

<ol>
  <li>Элемент_1</li>
  <li>Элемент_2</li>
  <li>Элемент_3</li>
</ol>
    Но, в реальных проектах такого никто не делает. Если нужно цифры в кружочках, то это стилизуется через CSS.
  • Viktor Sharko
    Viktor Sharko
    2017-08-12 02:03:52
    Александр, скажите: если возможность использовать только некоторые иконки Font Awesome, а не загружать файл со всеми 450 иконками?
    1. Александр Мальцев
      Александр Мальцев
      2017-08-13 10:34:43
      Да, это можно, например, сделать с помощью сервиса IcoMoon App. Как это сделать, подробно описано в этой статье.
    2. Viktor Sharko
      Viktor Sharko
      2017-08-13 21:23:29
      Спасибо, хорошая статья.
      А вот если купить лицензию у Font Awesome, появляется ли возможность скачать у них шрифт только с тем набором символов, напротив которых поставил галочки?
    3. Александр Мальцев
      Александр Мальцев
      2017-08-14 14:38:22
      Точно не знаю. Скорее всего, вы просто получите доступ к большей базе иконок. Для этой цели у создателей шрифта Font Awesome есть сервис Fort Awesome.
      Чем вам IcoMoon не понравился? Свой набор шрифтовых иконок можно также создать с помощью программы Inkscape.
    4. Viktor Sharko
      Viktor Sharko
      2017-08-14 20:38:28
      Спасибо, буду думать что делать.
  • Sasha
    Sasha
    2016-04-07 21:38:08
    Код для вставки в Html не актуален, зайдите на Бутстрап и посмотрите новый, который пишется в шапке страницы
    1. Александр Мальцев
      Александр Мальцев
      2016-04-08 11:11:19
      OK, изменил на последнюю версию.
  • Виктор
    Виктор
    2016-01-03 08:21:26
    я пока разбирался в иконках, прочитал что такая анимация будет некоректно работать на некоторых браузерах, вот я задумался стоит ли ставить её
    заметил что на мазиле анимация тресётся как после похмелья )))
    1. Александр Мальцев
      Александр Мальцев
      2016-01-03 14:37:43
      Да, в некоторых версиях Firefox было такое.
      Но в последних версиях всё нормально.
  • Виктор
    Виктор
    2016-01-03 08:11:31
    да я в интернете гдето нашел что типо так <?? > браузер не увидит что это html код, и так я хотел его вампоказать )))),
    ща понял что нужно в «code»
    а так вроде всё почти получилось, только эта иконка вращается постоянно возле поиска, не зависимо нажал я на неё или нет
    1. Виктор
      Виктор
      2016-01-02 21:36:53
      блин вот я лузер ,,,,,,))))) код в браузере остался ....)))))
      как сделать что бы вам был виден ??!
      1. Александр Мальцев
        Александр Мальцев
        2016-01-03 03:24:15
        Поместить код между открывающим и закрывающим тегом code:
        <code>
...
</code>
    2. Виктор
      Виктор
      2016-01-01 21:05:25
      itchief.ru/assets/images/tickets/2014.08/navbar-with-search.png
      такое меню только рядом кнопка поиск
      1. Александр Мальцев
        Александр Мальцев
        2016-01-02 08:02:52
        Сделать следующее:
        <nav role="navigation" class="navbar navbar-default">
  <div class="navbar-header">
    <!-- ... -->
  </div>
  <div id="navbarCollapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
    <!-- ... -->  
    </ul>
    <form role="search" class="navbar-form navbar-left">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Поиск на сайте" value="">
        <span class="input-group-btn">
  	  <button id="search" type="submit" class="btn btn-default">Найти</button>
	</span>
      </div>
    </form>
    <!-- ... -->
      2. Виктор
        Виктор
        2016-01-02 21:21:29
        что то этот код не сработал, по ходу я что то не туда прописал может поможешь
        вот код
        <?nav role="navigation" class="navbar navbar-default">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a href="#" class="navbar-brand">Бренд</a>
  </div>
  <!-- Collection of nav links, forms, and other content for toggling -->
  <div id="navbarCollapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Главная</a></li>
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Новости <b class="caret"></b></a>
        <ul role="menu" class="dropdown-menu">
          <li><a href="#">Windows</a></li>
          <li><a href="#">Mac OS</a></li>
          <li><a href="#">Linux</a></li>
          <li class="divider"></li>
          <li><a href="#">Другие системы</a></li>
        </ul>
      </li>
     </ul>
     <form class="navbar-form navbar-left" role="search">
       <div class="form-group">
         <input type="text" class="form-control" placeholder="Найти">
       </div>
       <button type="submit" class="btn btn-default">Поиск</button>
     </form>
     <ul class="nav navbar-nav navbar-right">
       <li><a href="#">Войти</a></li>
     </ul>
  </div>
</nav ?>
      3. Александр Мальцев
        Александр Мальцев
        2016-01-03 03:22:51
        А что это за скобочки <?… ?> (PHP).
        Если в PHP, то можно так:
        <?
echo <<<HTML
  <nav role="navigation" class="navbar navbar-default">
  <!-- ... -->
  </nav>
HTML;
?>
    3. Виктор
      Виктор
      2016-01-01 20:42:42
      Приветствую Александр, а какой способ подключения шрифта вы рекомендуете.
      Я подключил вашу меню бутстрап с поиском по сайту

      а как сделать что бы при нажатии поиск вместо него появлялась вращающая иконка загрузки
      1. Александр Мальцев
        Александр Мальцев
        2016-01-02 07:51:14
        На мой взгляд, лучше использовать подключение шрифта из каталога своего сайта. Во-первых, Вы не будете ни от кого зависеть и сможете включить в набор не все иконки, а только те которые Вы используете. Не думаю, что Вы будете использовать все 605 иконок. Обычно это цифра составляет не более 40-60 иконок, а это 10% от всего веса. Т.е. исключив из набора ненужные иконки, Вы можете прилично увеличить скорость загрузки сайта. Хотел сделать это на этом сайте, но так руки и не дошли.

        Заменить кнопку вращающейся иконкой загрузки:
        <div class="input-group">
  <input type="text" class="form-control" placeholder="Поиск на сайте" value="">
  <span class="input-group-btn">
    <button id="search" type="submit" class="btn btn-default">Найти</button>
  </span>
</div>
        JavaScript:
        $('#search').click(function(){
  $(this).html('<i class="fa fa-cog fa-spin"></i>');
});
    4. Егор
      Егор
      2015-05-06 12:27:38
      Здравствуйте, хорошая статья, особенно пригодился код иконки в круглой иконке.
      А как поместить Awesome шрифты внутрь поля для заполнения контактной формы имя емаил? Только сейчас подумал, может как plaseholder? Хотя вряд-ли.

      И еще вопрос по bootstrap. Как сделать в тегах 
      <pre>
      горизонтальную прокрутку, без переноса строки? Не получается у меня никак. Вертикальная то получается.
      1. Александр Мальцев
        Александр Мальцев
        2015-05-06 14:53:27
        Здравствуйте, Егор
        Про иконки вопрос не совсем понятен. А как Вы ими собираетесь заполнять поле email?

        Ответ на второй вопрос:
        Здесь необходимо переопределить свойство word-wrap для элемента pre
        Можно так:
        <pre style="word-wrap:normal;">...</pre>
        Ну лучше создать свой класс.
        CSS:
        .nowrap-pre {
word-wrap: normal !important;
}
        HTML:
        <pre class="nowrap-pre">...</pre>
        А если нужно задать для всех pre, то вот так:
        pre {
word-wrap: normal !important;
}
      2. Егор
        Егор
        2015-05-06 17:10:59
        Насчет pre, спасибо большое, все получилось.

        Насчет формы и иконок, я все понял, взял бесплатный шаблон bootstrap и посмотрел :))) Это так верстают: 
        <div class="form-group has-feedback">
  <label class="sr-only" for="name2">Name</label>
  <input type="text" class="form-control" id="name2" placeholder="Name" name="name2" required>
  <i class="fa fa-user form-control-feedback"></i>
</div>
        Они просто в div и поле для заполнения и иконку помещают. Я скрин прикрепил. Спасибо еще раз за уроки.