Bootstrap 3 - Иконки Font Awesome
Установка шрифта
Чтобы подключить шрифт 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
Готовую сборку с платформой Twitter Bootstrap 3 можете скачать по ссылке.<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Использование иконок шрифта 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-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>
Создание «вытянутых» иконок
Для создания «вытянутых» кавычек или иконок статей используйте классы 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> иконка, отраженная по вертикали
Иконки, наложенные друг на друга
Чтобы наложить несколько иконок друг на друга, используйте класс "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 и поле для заполнения и иконку помещают. Я скрин прикрепил. Спасибо еще раз за уроки.