Bootstrap 3 - Иконки Font Awesome

Установка шрифта
Чтобы подключить шрифт 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-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> иконка "запрещено" на иконке "камеры"
иконка "флага" на иконке "круга"
иконка "терминала" на иконке "квадрата"
иконка "запрещено" на иконке "камеры"
Например, в UTF-8 есть такие символы с цифрами.
Добавить их через CSS, например, к элементам списка можно так:
Но, в реальных проектах такого никто не делает. Если нужно цифры в кружочках, то это стилизуется через CSS.
А вот если купить лицензию у Font Awesome, появляется ли возможность скачать у них шрифт только с тем набором символов, напротив которых поставил галочки?
Чем вам IcoMoon не понравился? Свой набор шрифтовых иконок можно также создать с помощью программы Inkscape.
заметил что на мазиле анимация тресётся как после похмелья )))
Но в последних версиях всё нормально.
ща понял что нужно в «code»
а так вроде всё почти получилось, только эта иконка вращается постоянно возле поиска, не зависимо нажал я на неё или нет
как сделать что бы вам был виден ??!
такое меню только рядом кнопка поиск
вот код
Если в PHP, то можно так:
Я подключил вашу меню бутстрап с поиском по сайту
а как сделать что бы при нажатии поиск вместо него появлялась вращающая иконка загрузки
Заменить кнопку вращающейся иконкой загрузки:
JavaScript:
А как поместить Awesome шрифты внутрь поля для заполнения контактной формы имя емаил? Только сейчас подумал, может как plaseholder? Хотя вряд-ли.
И еще вопрос по bootstrap. Как сделать в тегах горизонтальную прокрутку, без переноса строки? Не получается у меня никак. Вертикальная то получается.
Про иконки вопрос не совсем понятен. А как Вы ими собираетесь заполнять поле email?
Ответ на второй вопрос:
Здесь необходимо переопределить свойство word-wrap для элемента pre
Можно так:
Ну лучше создать свой класс.
CSS:
HTML:
А если нужно задать для всех pre, то вот так:
Насчет формы и иконок, я все понял, взял бесплатный шаблон bootstrap и посмотрел :))) Это так верстают:
Они просто в div и поле для заполнения и иконку помещают. Я скрин прикрепил. Спасибо еще раз за уроки.