Bootstrap 3 - Иконки Font Awesome

28.08.2021

63.3K

Содержание:

Комментарии

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

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

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

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

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

HTML

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

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

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

HTML

<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-fw.

HTML

<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 Вы можете заменить стандартные маркеры в неупорядоченных списках на другие иконки.

HTML

<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>

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

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

HTML

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

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

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

HTML

<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-*.

HTML

<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" для иконки, расположенной на заднем плане. Класс "fa-inverse" может использоваться для инвертирования цвета иконки.

HTML

<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>
иконка "запрещено" на иконке "камеры"

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

Ildar

14.05.2020, 19:40

А подскажите, пожалуйста, как можно подключить иконки с цифрами 1. 2. и тд.? Имею ввиду на что ссылаться через CDN в стандартных их нет.

Александр Мальцев

17.05.2020, 10:58

Иконок с цифрами в 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

12.08.2017, 02:03

Александр, скажите: если возможность использовать только некоторые иконки Font Awesome, а не загружать файл со всеми 450 иконками?

Александр Мальцев

13.08.2017, 10:34

Да, это можно, например, сделать с помощью сервиса IcoMoon App. Как это сделать, подробно описано в этой статье.

Viktor Sharko

13.08.2017, 21:23

Спасибо, хорошая статья.
А вот если купить лицензию у Font Awesome, появляется ли возможность скачать у них шрифт только с тем набором символов, напротив которых поставил галочки?

Александр Мальцев

14.08.2017, 14:38

Точно не знаю. Скорее всего, вы просто получите доступ к большей базе иконок. Для этой цели у создателей шрифта Font Awesome есть сервис Fort Awesome.
Чем вам IcoMoon не понравился? Свой набор шрифтовых иконок можно также создать с помощью программы Inkscape.

Viktor Sharko

14.08.2017, 20:38

Спасибо, буду думать что делать.

Аноним

07.04.2016, 21:38

Код для вставки в Html не актуален, зайдите на Бутстрап и посмотрите новый, который пишется в шапке страницы

Александр Мальцев

08.04.2016, 11:11

OK, изменил на последнюю версию.

Виктор

03.01.2016, 08:21

я пока разбирался в иконках, прочитал что такая анимация будет некоректно работать на некоторых браузерах, вот я задумался стоит ли ставить её
заметил что на мазиле анимация тресётся как после похмелья )))

Александр Мальцев

03.01.2016, 14:37

Да, в некоторых версиях Firefox было такое.
Но в последних версиях всё нормально.

Виктор

03.01.2016, 08:11

да я в интернете гдето нашел что типо так <?? > браузер не увидит что это html код, и так я хотел его вампоказать )))),
ща понял что нужно в «code»
а так вроде всё почти получилось, только эта иконка вращается постоянно возле поиска, не зависимо нажал я на неё или нет

Виктор

02.01.2016, 21:36

блин вот я лузер ,,,,,,))))) код в браузере остался ....)))))
как сделать что бы вам был виден ??!

Александр Мальцев

03.01.2016, 03:24

Поместить код между открывающим и закрывающим тегом code:

<code>
...
</code>

Виктор

01.01.2016, 21:05

itchief.ru/assets/images/tickets/2014.08/navbar-with-search.png
такое меню только рядом кнопка поиск

Александр Мальцев

02.01.2016, 08:02

Сделать следующее:

<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>
    <!-- ... -->

Виктор

02.01.2016, 21:21

что то этот код не сработал, по ходу я что то не туда прописал может поможешь
вот код

<?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 ?>

Александр Мальцев

03.01.2016, 03:22

А что это за скобочки <?… ?> (PHP).
Если в PHP, то можно так:

<?
echo <<<HTML
  <nav role="navigation" class="navbar navbar-default">
  <!-- ... -->
  </nav>
HTML;
?>

Виктор

01.01.2016, 20:42

Приветствую Александр, а какой способ подключения шрифта вы рекомендуете.
Я подключил вашу меню бутстрап с поиском по сайту

а как сделать что бы при нажатии поиск вместо него появлялась вращающая иконка загрузки

Александр Мальцев

02.01.2016, 07:51

На мой взгляд, лучше использовать подключение шрифта из каталога своего сайта. Во-первых, Вы не будете ни от кого зависеть и сможете включить в набор не все иконки, а только те которые Вы используете. Не думаю, что Вы будете использовать все 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>');
});

Аноним

06.05.2015, 12:27

Здравствуйте, хорошая статья, особенно пригодился код иконки в круглой иконке.
А как поместить Awesome шрифты внутрь поля для заполнения контактной формы имя емаил? Только сейчас подумал, может как plaseholder? Хотя вряд-ли.

И еще вопрос по bootstrap. Как сделать в тегах

<pre>

горизонтальную прокрутку, без переноса строки? Не получается у меня никак. Вертикальная то получается.

Александр Мальцев

06.05.2015, 14:53

Здравствуйте, Егор
Про иконки вопрос не совсем понятен. А как Вы ими собираетесь заполнять поле 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;
}

Аноним

06.05.2015, 17:10

Насчет 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 и поле для заполнения и иконку помещают. Я скрин прикрепил. Спасибо еще раз за уроки.