Font Awesome Более 400 маштабируемых векторных иконок

Описание

Более 400 маштабируемых векторных иконок, к которым можно применять стили CSS для изменения цвета, тени, размера и т.д.

Для подключения иконок не требуется JavaScript.

Подходят для дисплеев с высоким разрешением.

Изначально разработано для Bootstrap но отлично работает со всеми инфраструктурами.

Подключение. Первый способ

1. Вставьте следующий код в <head> в вашего сайта:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

2. Проверьте примеры работы, для того чтобы начать пользоваться Font Awesome.

Второй способ

1. Скачайте архив и поместите папку с файлами на сервере.

2. Вставьте следующий код в <head> в вашего сайта (измените указанный путь, если это потребуется):

<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">

3. Проверьте примеры работы, для того чтобы начать пользоваться Font Awesome.

Примеры

Основные иконки

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

fa-camera-retro
<i class="fa fa-camera-retro"></i> fa-camera-retro
  • Если вы увеличите размер шрифта, значок станет больше. Тоже самое касается всех наследуемых свойств CSS (цвет, тени и т.д.).

Крупные иконки

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

fa-lg

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
  • Если иконки обрежутся сверху или снизу, проверьте достаточно ли line-height.

Иконки с фиксированной шириной

Используйте fa-fw для того чтобы настроить иконки по фиксированной ширине.

  Home   Library   Applications   Settings 
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>

Списки иконок

Используя fa-ul и fa-li легко заменить маркеры списков.

  • Списки иконок
  • могут использоваться
  • как маркеры
  • в списках
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>Списки иконок</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 для выравнивания иконок в статьях или цитатах.

…tomorrow we will run faster, stretch out our arms farther… And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past. 

<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.

Вращение иконок

Используйте fa-spin класс для вращения иконок. Хорошо работает с fa-spinner, fa-refresh и fa-cog.

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>

CSS3 анимация не поддерживается в IE8 - IE9.

Повороты иконок

Для произвольного поворота иконок используйте классы fa-rotate-* и fa-flip-*.

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical 

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical

Наложение иконок

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

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera 
<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>
fa-twitter on fa-square-o<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>
fa-flag on fa-circle<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>
fa-terminal on fa-square<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>
fa-ban on fa-camera

Смотрите также

Поделитесь ссылкой

Статистика

Яндекс цитирования
© 2011 - 2023 Школа MODX
Напишите нам в Telegram