Примеры использования Font Awesome
После того, как вы подключили Font Awesome к своему проекту, иконки можно вызывать с помощью тега <i>.
Некоторые примеры были позаимствованы из документации Bootstrap.
The following examples are kept simple and assume use of Font Awesome CDN, which provides auto-accessibility support. If you are not using the Font Awesome CDN, please see the manual accessibility examples and read more about making your icons more awesome for all users
Пример: Базовые иконки fa-camera-retro
Вы можете разместить иконки Font Awesome в любом месте, используя в имени класса префикс fa и название иконки. Font Awesome разработан так, чтобы он мог быть использован в строковых элементах (мы любим использовать тег <i> так как он очень короткий, но использование тега <span> будет семантически более правильно).
<i></i> fa-camera-retro
- Пример: Базовые иконки Если вы меняете значение свойства font-size у контейнера иконок, то иконки станут больше.
Такое поведение происходит и с цветом, тенью и другими свойствами, которые могут наследоваться.
Такое поведение происходит и с цветом, тенью и другими свойствами, которые могут наследоваться.fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
Для увеличения размеров иконок в родительском элементе используйте классы fa-lg (увеличение на 33%), fa-2x, fa-3x, fa-4x, или
<i></i> fa-lg <i></i> fa-2x <i></i> fa-3x <i></i> fa-4x <i></i> fa-5x
- Если ваши иконки обрезаны сверху и снизу, то удостоверьтесь в правильном значении свойства line-height.
Главная Библиотека Приложения Настройки
Используйте класс fa-fw для того, чтобы задать фиксированную ширину иконкам.
<div> <a href="#"><i aria-hidden="true"></i> Главная</a> <a href="#"><i aria-hidden="true"></i> Библиотека</a> <a href="#"><i aria-hidden="true"></i> Приложения</a> <a href="#"><i aria-hidden="true"></i> Настройки</a> </div>
- Иконки списков
- могут быть использованы
- как маркеры
Используйте классы fa-ul и fa-li для быстрого удаления стандартных маркеров в ненумерованных списках.
<ul> <li><i></i>Иконки списков</li> <li><i></i>могут быть использованы</li> <li><i></i>как маркеры</li> <li><i></i>в списках</li> </ul>
…Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от
всего сердца… Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я.
Используйте классы fa-border и fa-pull-right или fa-pull-left для выделения цитаты или подключения иконки статьи.
<i aria-hidden="true"></i> ...Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца... Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я.
Пример загрузки (с fa-spinner icon) Пример загрузки (с fa-circle-o-notch icon) Пример загрузки (с fa-refresh icon) Пример загрузки (с fa-cog icon) Пример загрузки (с fa-spinner icon)
Используйте класс fa-spin, чтобы заставить вращаться любую иконку, и используйте класс fa-pulse, чтобы заставить вращаться иконку по 8 шагов. Также работает с классами fa-spinner, fa-refresh, и fa-cog.
<i></i> <span>Загрузка.
..</span>
<i></i>
<span>Загрузка...</span>
<i></i>
<span>Загрузка...</span>
<i></i>
<span>Загрузка...</span>
<i></i>
<span>Загрузка...</span>
На заметку: Некоторые браузера на нескольких платформах имеют проблемы с анимацией иконок, что дает эффект «безудержного веселья» у иконки. Читайте проблему #671 для ознакомления с ней и изучения возможных решений.
На заметку: Анимация CSS3 не поддерживается в IE8 — IE9.
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical
fa-rotate-* and fa-flip-*.
<i></i> normal<br> <i></i> fa-rotate-90<br> <i></i> fa-rotate-180<br> <i></i> fa-rotate-270<br> <i></i> fa-flip-horizontal<br> <i></i> fa-flip-vertical
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
Чтобы сделать группу из иконок, используйте класс fa-stack для родителя, класс fa-stack-1x используйте для задания стандартного размера иконки, а класс fa-stack-2x для увеличенного. Класс fa-inverse может быть использован для присваивания альтернативного цвета иконке. Также вы можете использовать классы увеличения для управления размерами иконок.
<span> <i></i> <i></i> </span> fa-twitter на fa-square-o<br> <span> <i></i> <i></i> </span> fa-flag на fa-circle<br> <span> <i></i> <i></i> </span> fa-terminal на fa-square<br> <span> <i></i> <i></i> </span> fa-ban на fa-camera
Примеры для Bootstrap 3
Удалить Настройки
Font Awesome
Версия 4.
7.0
Font Awesome прекрасно работает со всеми компонентами Bootstrap.
<a href="#">
<i></i> Удалить</a>
<a href="#">
<i></i> Настройки</a>
<a href="#">
<i></i> Font Awesome<br>Версия 4.7.0</a>
<div>
<a href="#">
<i title="Align Left"></i>
</a>
<a href="#">
<i title="Align Center"></i>
</a>
<a href="#">
<i title="Align Right"></i>
</a>
<a href="#">
<i title="Align Justify"></i>
</a>
</div>
<div>
<span><i></i></span>
<input type="text" placeholder="Ваш Email">
</div>
<div>
<span><i></i></span>
<input type="password" placeholder="Пароль">
</div>
<div>
<a href="#"><i></i> Пользователь</a>
<a data-toggle="dropdown" href="#">
<span title="Toggle dropdown menu"></span>
</a>
<ul>
<li><a href="#"><i></i> Редактировать</a></li>
<li><a href="#"><i></i> Удалить</a></li>
<li><a href="#"><i></i> Забанить</a></li>
<li></li>
<li><a href="#"><i></i> Дать права администратора</a></li>
</ul>
</div>
Пользовательский CSS
Всё, что вы можете сделать со шрифтами с помощью CSS, вы сможете сделать и с Font Awesome.
Пример рейтинга (позаимствовано из CSS Tricks)
Общедоступность
Обновление… Сохранение. Держитесь крепче!
Уровень заряда: 50%
Немного о наших мыслях об общедоступности иконок. Если иконка используется для декорирования или отображения бренда, то они не должны быть объявлены общедоступно, тк они влияют на приложения, читающие сайты в слух. Если иконка передает смысл содержания текста в контексте интерфейса, то убедитесь в том, что этот смысл также передается и вспомогательными технологиями, дополнительным текстом или скрытым блоком.
<a href="path/to/settings" aria-label="Настройки"> <i aria-hidden="true"></i> </a> <a href="path/to/settings" aria-label="Удалить"> <i aria-hidden="true"></i> </a> <a href="#navigation-main" aria-label="Перейти к основному меню"> <i aria-hidden="true"></i> </a>
<i aria-hidden="true"></i> <span>Обновление.
..</span>
<i aria-hidden="true"></i>
<span>Сохранение. Держитесь крепче!</span>
<div> <span><i aria-hidden="true"></i></span> <input type="text" placeholder="Ваш email"> </div> <div> <span><i aria-hidden="true"></i></span> <input type="password" placeholder="Пароль"> </div>
<a href="path/to/shopping/cart" aria-label="Посмотреть 3 предмета в вашей корзине"> <i aria-hidden="true"></i> </a>
<i aria-hidden="true"></i> <span>Уровень заряда: 50%</span>
Работа с иконками | WebReference
Иконки выводятся через псевдокласс ::before, поэтому к любому элементу достаточно добавить класс с именем иконки. Обычно применяется элемент <i>, но можно использовать и любой другой строчный элемент, например: <b>, <span> и др.
Для <i> указывается два основных класса — fa и fa-icon, где вместо icon пишется имя иконки.
Все имена доступны на этой странице.
http://fortawesome.github.io/Font-Awesome/icons
Иконки разбиты по категориям, также есть поиск по ключевым словам (рис. 1).
Рис. 1. Иконки для видеоплеера
Чтобы добавить иконку с именем play напишем следующий код:
<i></i>
Сам элемент <i> пустой и вставляется в то место на странице, где требуется вывод иконки. Размер её совпадает с размером текущего текста.
Размеры иконок
Размер любой иконки из набора мы можем изменить с помощью свойства font-size, переопределив его в своём стиле. Также Font Awesome предлагает пять готовых размеров. Достаточно добавить дополнительный класс к элементу <i> как показано в примере 1.
Пример 1. Размер иконок
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Font Awesome</title> <link rel="stylesheet" href="css/font-awesome.min.
css">
</head>
<body>
<p><i></i> Исходный размер</p>
<p><i></i> fa-lg</p>
<p><i></i> fa-2x</p>
<p><i></i> fa-3x</p>
<p><i></i> fa-4x</p>
<p><i></i> fa-5x</p>
</body>
</html>Результат данного примера показан на рис. 2.
Рис. 2. Размеры иконок
Цвета
Поскольку иконка это текстовый символ, то к нему применимы стилевые свойства color, background, text-shadow и другие, задающие оформление текста. В примере 2 показаны некоторые варианты изменения вида иконок.
Пример 2. Оформление иконок через стили
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Font Awesome</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<style>
.fa-bug { color: #f15a22; }
.fa-book {
background: #000; /* Чёрный цвет фона */
padding: 2px 5px; /* Поля */
border-radius: 3px; /* Радиус скругления */
}
. fa-car {
color: #96c13c; /* Цвет иконки */
text-shadow: 2px 2px 0 #333; /* Резкая тень под иконкой */
}
.fa-comment {
color: #f7941e; /* Цвет иконки */
text-shadow: 0 0 6px #000; /* Размытая тень */
}
</style>
</head>
<body>
<p><i></i></p>
<p><i></i></p>
<p><i></i></p>
<p><i></i></p>
</body>
</html>
fa-car {
color: #96c13c; /* Цвет иконки */
text-shadow: 2px 2px 0 #333; /* Резкая тень под иконкой */
}
.fa-comment {
color: #f7941e; /* Цвет иконки */
text-shadow: 0 0 6px #000; /* Размытая тень */
}
</style>
</head>
<body>
<p><i></i></p>
<p><i></i></p>
<p><i></i></p>
<p><i></i></p>
</body>
</html>Результат данного примера показан на рис. 3.
Рис. 3. Цветные иконки
Font Awesome вводит специальный класс fa-inverse, изменяющий цвет иконок на белый, поэтому в стилях для иконки книжки цвет не указывается.
Поворот иконок
Иконки можно поворачивать на 90, 180 или 270 градусов по часовой стрелке, а также отражать их по горизонтали или вертикали. Для этого применяются следующие классы:
- fa-rotate-90 — поворот на 90º по часовой стрелке;
- fa-rotate-180 — поворот на 180º;
- fa-rotate-270 — поворот на 270º;
- fa-flip-horizontal — отражение по горизонтали;
- fa-flip-vertical — отражение по вертикали.
Надо учитывать, что не все иконки имеет смысл поворачивать и отражать, результат будет заметен для несимметричных иконок (пример 3).
Пример 3. Поворот и отражение иконок
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Font Awesome</title> <link rel="stylesheet" href="css/font-awesome.min.css"> </head> <body> <p><i></i></p> <p><i></i></p> <p><i></i></p> </body> </html>
Результат данного примера показан на рис. 4. Первая иконка самолёта выводится в исходном виде, вторая поворачивается на 90º, а третья отражается по горизонтали.
Рис. 4. Преобразования иконки
Анимация
Анимация обычно применяется для создания эффекта ожидания. Иконки можно заставить бесконечно вращаться по часовой стрелке двумя способами. Класс fa-spin производит плавное вращение, а fa-pulse — пошаговое вращение.
Ниже показано вращение футбольного мяча.
<p><i></i></p>
Объединение иконок
Кроме обычного вывода иконки можно комбинировать между собой. Для этого создаём элемент <div> с классом fa-stack, а в него уже вставляем желаемые иконки. Вначале идёт нижняя, затем верхняя. К самим иконкам добавляется класс fa-stack-1x или fa-stack-2x, в зависимости от того, какая иконка должна быть больше размером. Ниже показана основная структура кода.
<div> <i></i> <i></i> </div>
Для отдельных иконок мы можем задавать собственный стиль, например, цвет иконки. Тем самым получить новые цветовые решения (пример 4).
Пример 4. Комбинация иконок
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Font Awesome</title> <link rel="stylesheet" href="css/font-awesome.min.css"> <style> .
fa-ban {
color: #d51920; /* Цвет */
opacity: 0.6; /* Полупрозрачность */
}
</style>
</head>
<body>
<div>
<i></i>
<i></i>
</div>
</body>
</html>Результат данного примера показан на рис. 5.
Рис. 5. Комбинация иконок
Автор: Влад Мержевич
Последнее изменение: 11.08.2018
Документация JDK 19 — Главная
- Главная
- Ява
- Java SE
- 19
Обзор
- Прочтите меня
- Примечания к выпуску
- Что нового
- Руководство по миграции
- Загрузить JDK
- Руководство по установке
- Формат строки версии
Инструменты
- Технические характеристики инструментов JDK
- Руководство пользователя JShell
- Руководство по JavaDoc
- Руководство пользователя средства упаковки
Язык и библиотеки
- Обновления языка
- Основные библиотеки
- HTTP-клиент JDK
- Учебники по Java
- Модульный JDK
- Руководство программиста API бортового регистратора
- Руководство по интернационализации
Технические характеристики
- Документация API
- Язык и ВМ
- Имена стандартных алгоритмов безопасности Java
- банок
- Собственный интерфейс Java (JNI)
- Инструментальный интерфейс JVM (JVM TI)
- Сериализация
- Проводной протокол отладки Java (JDWP)
- Спецификация комментариев к документации для стандартного доклета
- Прочие характеристики
Безопасность
- Руководство по безопасному кодированию
- Руководство по безопасности
Виртуальная машина HotSpot
- Руководство по виртуальной машине Java
- Настройка сборки мусора
Управление и устранение неполадок
- Руководство по устранению неполадок
- Руководство по мониторингу и управлению
- Руководство по JMX
Client Technologies
- Руководство по специальным возможностям Java
Направляющая для иконок — класс
| Иконка | Статус | Описание |
|---|---|---|
| Поднять/опустить руку | Пользователи могут поднимать и опускать руку. Как только инструктор вызывает пользователя, его рука автоматически опускается. | Не проверено | Когда пользователь, которого нет в списке, присоединяется к классу, он присоединится как неподтвержденный пользователь. После подтверждения этот значок исчезнет. | Микрофон | Этот значок микрофона позволяет включать и выключать микрофон. | Реакции | Пользователи могут оставлять комментарии и отзывы, которые будут отображаться в списке участников и на их видеопанели. Значок реакции отображается для учащихся в Классе. Учащиеся в Zoom увидят, что это называется «Обратная связь». | Обратная связь | Пользователи могут оставлять комментарии и отзывы, которые будут отображаться в списке участников и на их видеопанели. Значок обратной связи отображается для учащихся в Zoom, участвующих через боковую панель. Пользователи класса увидят, что это называется «Реакции». | Комнаты отдыха | Преподаватели могут открывать комнаты обсуждения, нажав кнопку «Разговор» на нижней панели инструментов. | Видео | Это означает, что ваше видео включено. | Видеостоп | Это означает, что ваше видео выключено. | Пользователь боковой панели | Указывает, что пользователь присоединился из обычного Zoom и использует боковую панель через браузер. | Увеличить Пользователь | Этот значок отображается только для инструкторов, чтобы указать, когда учащиеся присоединяются через обычный Zoom. | Запись | Указывает на возможность записи занятий. Это доступно только инструкторам. | Поделиться экраном | Значок совместного доступа к экрану доступен как преподавателям, так и учащимся. Преподаватели должны будут включить эту опцию, чтобы учащиеся могли делиться своими экранами. | Потерять фокус | Когда пользователь сворачивает приложение «Класс» в классе, преподаватель увидит значок глаза рядом со своим именем в списке участников, указывающий на то, что учащийся потерял фокус. | Золотая звезда | Инструкторы и ассистенты могут предоставлять пользователям золотые звезды, которые также могут видеть другие пользователи. | Загрузка | Значок загрузки рядом с вашим именем в списке участников будет означать, что вы ожидаете подключения веб-хука. | Зал ожидания | Часы рядом с именем участника указывают на то, что он ожидает выхода из комнаты ожидания.  |