Учебник Font Awesome

Иконки Font Awesome

Font Awesome - это отличная библиотека иконок и фреймворк CSS.

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

Чтобы использовать иконки Font Awesome, добавьте следующую строку в section вашего HTML документа:

1、Рекомендуемый CDN для Китая:

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

2、Рекомендуемый CDN для海外

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Внимание: Не рекомендуется загружать для установки, просто включите CDN файл в заголовке вашего html документа.
Внимание: Этот учебник использует версию 4.7.0.

Вы можете использовать префикс fa и имя иконки для вставки иконок Font Awesome.

Онлайн примеры

Пример

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.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>

Проверьте, ›/‹

Font Awesome спроектирован для использования с инлайн-элементами. Элементы <i> и <span> часто используются для иконок.

Кроме того, если вы измените размер или цвет шрифта контейнера иконки, иконка изменится.

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

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

Пример

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<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>
　
</body>
</html>

Проверьте, ›/‹

Совет: Если ваши иконки обрезаны сверху и снизу, увеличьте высоту строки.

Иконки списка

Классы fa-ul и fa-li используются для замены стандартных префиксов в unordered list.

Пример

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<ul class="fa-ul">
　　<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>
　
</body>
</html>

Проверьте, ›/‹

Эффект после выполнения:

Граничные и перемещаемые значки

Классы "fa-border", "fa-pull-right" или "fa-pull-left" используются для拉动引用 или значков статей.

Пример

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<i　class="fa　fa-quote-left　fa-3x　fa-pull-left　fa-border"></i>
Основной учебник -- Учитесь основам, чтобы идти дальше！！！<br>
Основной учебник -- Учитесь основам, чтобы идти дальше！！！<br>
Основной учебник -- Учитесь основам, чтобы идти дальше！！！<br>
Основной учебник -- Учитесь основам, чтобы идти дальше！！！
　
</body>
</html>

Проверьте, ›/‹

Эффект после выполнения:

Динамические значки

Класс "fa-spin" позволяет значкам вращаться, класс "fa-pulse" позволяет значкам вращаться с периодом 8 шагов.

Пример

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<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>
　
</body>
</html>

Проверьте, ›/‹

Эффект после выполнения:

Внимание: IE8 и IE9 не поддерживают анимации CSS3.

Вращаемые и переворачиваемые значки

Классы "fa-rotate-*" и "fa-flip-*" используются для вращения и переворачивания значков.

Пример

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<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>
　
</body>
</html>

Проверьте, ›/‹

Эффект после выполнения:

Сложенные значки

Чтобы叠放多个 значки, используйте класс "fa-stack" на родительском элементе, "fa-stack-1x" используется для значков стандартного размера, "fa-stack-2x" для больших значков.

Класс "fa-inverse" может быть использован для замены цвета значков. Вы также можете добавить родительскому элементу более крупный класс значков, чтобы дополнительно контролировать размер.

Пример

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<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 на 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) на 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 на fa-camera
　
</body>
</html>

Проверьте, ›/‹

Эффект после выполнения:

Значки с фиксированной шириной

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

Пример

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<p>С фиксированной шириной:</p>
<div class="list-group">
　　<a href="#" class="list-group-item"><i class="fa fa-home fa-fw"></i> Дом</a>
　　<a href="#" class="list-group-item"><i class="fa fa-book fa-fw"></i> Библиотека</a>
　　<a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i> Приложения</a>
　　<a href="#" class="list-group-item"><i class="fa fa-cog fa-fw"></i> Настройки</a>
</div>
<p Без фиксированной ширины:</p>
<div class="list-group">
　　<a href="#" class="list-group-item"><i class="fa fa-home"></i> Дом</a>
　　<a href="#" class="list-group-item"><i class="fa fa-book"></i> Библиотека</a>
　　<a href="#" class="list-group-item"><i class="fa fa-pencil"></i> Приложения</a>
　　<a href="#" class="list-group-item"><i class="fa fa-cog"></i> Настройки</a>
</div>
　
</body>
</html>

Проверьте, ›/‹

Эффект после выполнения:

Брендовые иконки Font Awesome