Основные иконки
Чтобы использовать шрифт Высокий иконки, добавьте следующую строку внутри <head> раздел вашей HTML страницы:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
Примечание: Ни одна загрузка или установка не требуется!
Вы устанавливаете шрифт Высокий иконки с помощью префикса fa и имя значка.
пример
Следующий код:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>Результаты в:
Шрифт Высокий предназначен для использования с строчными элементами. <i> и <span> элементы широко используются для иконок.
Также обратите внимание, что при изменении размера шрифта или цвет контейнера значка, значок изменится. То же самое относится и к вещи, тени, и все остальное, что получает в наследство с помощью CSS.
Более крупные значки
fa-lg (33% increase) , fa-2x , fa-3x , fa-4x , или fa-5x классы используются для увеличения размеров значка относительно их контейнера.
пример
Следующий код:
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
Результаты в:
Tip: Если ваши иконки становятся сколов сверху и снизу, увеличьте высоту строки.
Список иконок
В fa-ul и fa-li классы используются для замены пуль по умолчанию в случае маркированного списка.
пример
Следующий код:
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List
icons</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
<li><i class="fa-li
fa fa-square"></i>List icons</li>
</ul>Результаты в:
- List icons
- List icons
- List icons
Разграфленных и тянутые Иконки
В fa-border , fa-pull-right или fa-pull-left классы используются для для выдвижных кавычки или значков статьи.
пример
Следующий код:
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Результаты в:
анимированные иконки
fa-spin класс получает любой значок , чтобы повернуть, и fa-pulse класс получает любой значок , чтобы повернуть с 8 шагов.
пример
Следующий код:
<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>
<i
class="fa fa-spinner fa-pulse"></i>
Результаты в:
Примечание: IE8 и IE9 не поддерживает CSS3 анимации.
Поворачивается и перевернул Иконки
В fa-rotate-* и fa-flip-* классы используются для вращения и флип иконки.
пример
Следующий код:
<i class="fa fa-shield"></i>
<i class="fa fa-shield
fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield
fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<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-circle-thin
fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle-thin<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter
fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle<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"
style="color:red;"></i>
</span>
fa-ban on fa-cameraРезультаты в:
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
Неподвижная Ширина иконки
fa-fw класс используется для установки иконок при фиксированной ширины. Этот класс полезен при различной ширины значок скидывать выравнивание. Особенно полезны в navlists Bootstrap и в список групп.
пример
<div class="list-group">
<a href="#" class="list-group-item"><i
class="fa fa-home fa-fw"></i> Home</a>
<a href="#"
class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
<a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i>
Applications</a>
<a href="#" class="list-group-item"><i class="fa
fa-cog fa-fw"></i> Settings</a>
</div> Попробуй сам " начальная загрузка
Шрифт Удивительный также прекрасно работает со всеми бутстраповская компонентами.