Начало работы с Font Awesome
Font Awesome CDN Супер легко
CDN Font Awesome самый наипростейший способ начать использовать Font Awesome на вашем сайте или в приложении, и всего-лишь одной строкой кода. Не нужно ничего скачивать и устанавливать.
Для чего нужен ваш email?
или
Расширенная кастомизация Легко
Хотите управлять и размещать файлы Font Awesome сами? Вы можете скачать, кастомизировать и использовать иконки с вашими настройками. В наборе файлов Font Awesome есть как и простой CSS-файл, так и файлы препроцессоров: Sass и Less.
Скачать
Использование Sass или Less
Используйте этот метод для кастомизации Font Awesome 4.7.0 при помощи LESS или SASS.
- Скопируйте полностью папку
font-awesomeв папку вашего проекта. - В вашем проекте откройте файлы
font-awesome/less/variables.или
font-awesome/scss/_variables.scssи отредактируйте@fa-font-pathили$fa-font-pathсоответственно, для того, чтобы указать путь к папке со шрифтами.@fa-font-path: "../font";
Путь к папке со шрифтами должен указывать относительно скомпилированной папки css.
- Скомпилируйте ваши LESS или SASS файлы при помощи компилятора. Должно все заработать.
- Посмотрите примеры для начала работы с Font Awesome!
или
Продвинутый уровень Профи
Sass Ruby Gem
Используйте официальный Ruby Gem Font Awesome SASS для легкого подключения Font Awesome SASS в ваш Rails- или Compass-проект. Занимается поддержкой: @supercodepoet.
- Добавьте нижеуказанную строку в Gemfile вашего проекта:
gem 'font-awesome-sass'
- Далее запустите:
$ bundle
- Или установите вручную:
$ gem install font-awesome-sass
Если вы используете Rails, то вставьте нижеуказанный код, например, в файл application.:
scss
@import "font-awesome-sprockets"; @import "font-awesome";
Дополнительная информация
Валидаторы
Для того, чтобы обеспечить наилучший результат в старых и глючных браузерах, Font Awesome в некоторых случаях использует хаки CSS для того, чтобы обойти глюки и ошибки в браузерах. Естественно, эти хаки вызывают предупреждения при проверке кода в валидаторах. Также, Font Awesome в нескольких ситуациях использует новые свойства CSS , которые еще не полностью стандартизированы, но используются они исключительно для прогрессивного улучшения.
На практике эти предупреждения валидатора не имеют значения, так как большая часть CSS работает без хаков и, соответственно, они не принимают участие в работе тех участков, где они не используются. Собственно, поэтому мы и игнорируем эти предупреждения.
Гайд по валидаторам от Bootstrap Team под лицензией CC BY 3.0
Internet Explorer 8 и @font-face
IE8 имеет несколько проблем с @font-face при совместном использовании с псевдоэлементом :before.
Font Awesome как раз использует такую комбинацию. Если страница закеширована или загружена без наведенного курсора мыши на окно браузера (например, при нажатии на кнопку «обновить» или при загрузке контента через фрейм), то страница будет сгенерирована до подгрузки шрифта. Наведение курсора мыши на страницу (body) должно отобразить некоторые иконки, наведение курсора на остальные не подгруженные иконки также их реанимирует.
Подробности данной проблемы.
Гайд по использованию @font-face в Internet Explorer 8 от Bootstrap Team под лицензией CC BY 3.0
Необходима поддержка IE7 ?
Если вам нужна поддержка IE7 , то примите мои соболезнования. Ну правда. Font Awesome 4.7.0 не поддерживает IE7и версии ниже. Вам необходимо прочитать инструкции по FA 3.2.1 для использования в IE7. Затем можете пойти и пожаловаться тому, кто потребовал поддержку IE7 .
Решение ошибок
Если у вас возникли проблемы в работе с Font Awesome, то можете поискать решение на
wiki -странице по частым ошибкам.
Занимается поддержкой: @gtagliala.
Font Awesome 5 доступен!
Font Awesome 5
или
Спасибо, просто скачать
Font Awesome 4
Как использовать и оформлять иконки с помощью CSS?
- Необходимые шаги для использования иконок
- Использование иконок Font Awesome
- Масштаб иконок Font Awesome и их цвет
- Использование иконок с кнопками
- Добавление эффекта тени к иконкам
- Использование иконок Font Awesome в списке
- Анимация иконок Font Awesome
- Поворот иконок Font Awesome
Для того, чтобы использовать иконки, вам необходимо следовать этим шагам:
Скопируйте код, предоставленный веб-страницей Font Awesome, и вставьте в <head> каждого шаблона или страницы, где хотите использовать иконки Font Awesome.
Для использования последней версии иконок this page смотрите эту страницу .
Здесь мы используем версию 5.8.1 link rel, чтобы определить связь между текущим документом и файлом со ссылкой:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
Загрузка и установка не требуются.
Иконки должны быть расположены внутри элемента <body>. Найдите необходимую вам иконку и скопируйте ее HTML код.
Код иконки будет выглядеть следующим образом:
<i></i>
Можно легко изменить размер и цвет иконки и даже добавить к ней тени, используя только CSS. Иконки также могут быть перемещаемы и анаимируемы.
Иконки могут находится фактически где угодно, если используете стилевой префикс (fa) и название иконки. Font Awesome используется вместе со строчными элементами, и рекомендуется придерживаться к ним при проекте с согласованным HTML элементом.
Для добавления иконок на веб-страницы допустимо использование тегов <i> и <span>. Если вам не нравится, что сайт предоставляет вам код с тегом <i>, вы можете заменить его на <span>.
Для ссылки на иконку вам необходимо использовать имя иконки с префиксомpan fa- и предпочитаемый вами стиль с соответствующим префиксом (fas, fal, far или fab).
Используйте элемента <i> для ссылки на элемент:
<i></i>
Или используйте элемент span:
<span></span>
Префикс fa устарел в версии 5. Новые префиксы по умолчанию fas (сплошной стиль), fab (бренды), far (обычный стиль) и fal (тонкий стиль).
Пример
<!DOCTYPE html>
<html>
<head>
<title>Иконки Font Awesome</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
<h3>Пример иконок</h3>
<p>Камера</p>
<i></i>
<p>Машина</p>
<i></i>
<p>Конверт</p>
<i></i>
</body>
</html>Попробуйте сами!
Иконки наследуют размер шрифта их родительского контейнера, чтобы соответствовать любому тексту, который может быть использован вместе с ними.
Можно увеличить или уменьшить масштаб иконок относительно унаследованного размера шрифта с помощью таких классов, как fa-xs, span>fa-sm, fa-lg, fa-2x и др.
Что касается цвета, он может быть установлен с помощью CSS свойства color. Просто необходимо установить иконки внутри элемента <div> и задать для него цвет в стиле, или просто установить стиль для элемента <i>.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Иконки Font Awesome</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
div {
color: #1c87c9;
}
</style>
</head>
<body>
<h3>Пример иконок с указанными размерами и цветами</h3>
<div>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</body>
</html>Попробуйте сами!
Смотрите детали:
Также возможно добавить стиль непосредственно к размеру иконки, устанавливая font-size во внешнем стиле иконки или в стилевом атрибуте HTML элемента, который ссылается на иконку.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Иконки Font Awesome</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
i {
color: #8ebf42;
}
.star {
font-size: 2em;
}
</style>
</head>
<body>
<h3>Пример иконок с установленными размерами шрифта и цвета</h3>
<div>
<p>Иконка с размером по умолчанию.</p>
<i></i>
<p>Font-size: 2em;</p>
<i></i>
</div>
</body>
</html> Попробуйте сами!
Вы можете также добавить иконки при создании кнопок. Просто вставьте иконку в элемент <button>.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Кнопки с иконками</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
button {
border: none;
border-radius: 5px;
color: #ffffff;
padding: 10px 14px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #666666;
box-shadow: 2px 4px #999999;
}
.btn {
background-color: #999999;
}
.home {
background-color: #ff6347;
}
.menu {
background-color: #008080;
}
.about {
background-color: #e6b800;
}
</style>
</head>
<body>
<h3>Кнопки с иконками</h3>
<p>Icon buttons:</p>
<button>
<i></i>
</button>
<button>
<i></i>
</button>
<button>
<i></i>
</button>
<p>Кнопки с иконками текстов и разными цветами:</p>
<button>
<i></i> Home
</button>
<button>
<i></i> Menu
</button>
<button>
<i></i> About
</button>
</body>
</html>Попробуйте сами!
Для добавления эффектов тени к иконкам необходимо CSS свойство text-shadow.
Установите тень для того элемента, к которому относится иконка:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Иконки Font Awesome</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
i {
color: #1c87c9;
text-shadow: 2px 2px 4px #00ffff;
font-size: 30px;
}
</style>
</head>
<body>
<h3>Пример иконок с тенью текста</h3>
<div>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</body>
</html>Попробуйте сами!
С помощью иконок можно сделать много всего! Можете оформлять ваши HTML списки в виде декоративных маркеров.
Используйте класс fa-ul для элемента <ul> и класс fa-li для элемента <li>, чтобы заменить маркеры по умолчанию в неупорядоченном списке.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Иконки Font Awesome</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
span {
color: #8ebf42;
}
</style>
</head>
<body>
<h3>Иконки в примере со списком</h3>
<ul>
<li>
<span>
<i></i>
</span>Элемент списка 1
</li>
<li>
<span>
<i></i>
</span>List item 2
</li>
<li>
<span>
<i></i>
</span>Элемент списка 3
</li>
<li>
<span>
<i></i>
</span>Элемент списка 4
</li>
</ul>
</body>
</html>Попробуйте сами!
Используйте класс fa-spin для плавного вращения иконки и класс fa-pulsefa-spinner.
Будет выглядеть таким образом:
<i></i>
Смотрите пример, чтобы увидеть разницу между классами fa-spin и fa-pulse:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Иконки Font Awesome</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
i {
color: #1c87c9;
text-shadow: 2px 2px 4px #00ffff;
font-size: 30px;
}
</style>
</head>
<body>
<h3>Иконки с классами fa-spin и fa-pulse</h3>
<p>Spinner spin:</p>
<i></i>
<p>Spinner pulse:</p>
<i></i>
</body>
</html>Попробуйте сами!
Пример с несколькими анимированными иконками:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Иконки Font Awesome</title>
<link rel="stylesheet" href="https://use. fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
i {
color: #1c87c9;
text-shadow: 2px 2px 4px #00ffff;
font-size: 30px;
}
</style>
</head>
<body>
<h3>Анимированные иконки</h3>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</body>
</html>
fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
i {
color: #1c87c9;
text-shadow: 2px 2px 4px #00ffff;
font-size: 30px;
}
</style>
</head>
<body>
<h3>Анимированные иконки</h3>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</body>
</html>Попробуйте сами!
Довольно часто для дополнительного дизайна вам может понадобиться поворачивать, отражать иконку.
Для произвольного поворота и отражения иконок используйте классы fa-rotate-* и fa-flip-*.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Иконки Font Awesome</title>
<link rel="stylesheet" href="https://use. fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
i {
color: #1c87c9;
text-shadow: 2px 2px 4px #00ffff;
font-size: 30px;
}
</style>
</head>
<body>
<h3>Поворот иконок</h3>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</body>
</html>
fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
i {
color: #1c87c9;
text-shadow: 2px 2px 4px #00ffff;
font-size: 30px;
}
</style>
</head>
<body>
<h3>Поворот иконок</h3>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</body>
</html>Попробуйте сами!
Смотрите градус и детали вращения:
| Значок | Описание | Пример |
|---|---|---|
| глификон глификон-звездочка | Попробуйте | |
| глификон глификон-плюс | Попробуйте | |
| глификон глификон-минус | Попробуйте | |
| глификон глификон-евро | Попробуйте | |
| глификон глификон-евро | Попробуйте | |
| глификон глификон-облако | Попробуйте | |
| глификон глификон-конверт | Попробуйте | |
| глификон глификон-карандаш | Попробуйте | |
| глификон глификон-стекло | Попробуйте | |
| глификон глификон-музыка | Попробуйте | |
| глификон глификон-поиск | Попробуйте | |
| глификон глификон-сердце | Попробуйте | |
| глификон глификон-звезда | Попробуйте | |
| глификон глификон-звезда-пусто | Попробуйте | |
| глификон глификон-пользователь | Попробуйте | |
| глификон глификон-пленка | Попробуйте | |
| глификон глификон-й большой | Попробуйте | |
| глификон глификон-й | Попробуйте | |
| глификон глификон-й-список | Попробуйте | |
| глификон глификон-ок | Попробуйте | |
| глификон глификон-удалить | Попробуйте | |
| глификон глификон-увеличение | Попробуйте | |
| глификон глификон-уменьшить масштаб | Попробуйте | |
| глификон глификон выключен | Попробуйте | |
| глификон глификон-сигнал | Попробуйте | |
| глификон глификон-шестерня | Попробуйте | |
| глификон глификон-мусор | Попробуйте | |
| глификон глификон-дом | Попробуйте | |
| глификон глификон-файл | Попробуйте | |
| глификон глификон-время | Попробуйте | |
| глификон глификон-дорога | Попробуйте | |
| глификон глификон-скачать-альт | Попробуйте | |
| глификон глификон-скачать | Попробуйте | |
| глификон глификон-загрузка | Попробуйте | |
| глификон глификон-входящие | Попробуйте | |
| глификон глификон-игра-круг | Попробуйте | |
| глификон глификон-повтор | Попробуйте | |
| глификон глификон-обновление | Попробуйте | |
| глификон глификон-список-альт | Попробуйте | |
| глификон глификон-замок | Попробуйте | |
| глификон глификон-флаг | Попробуйте | |
| глификон глификон-наушники | Попробуйте | |
| глификон глификон-громкость-выкл | Попробуйте | |
| глификон глификон-уменьшение громкости | Попробуйте | |
| глификон глификон-увеличение громкости | Попробуйте | |
| глификон глификон-qrcode | Попробуйте | |
| глификон глификон-штрих-код | Попробуйте | |
| глификон глификон-тег | Попробуйте | |
| глификон глификон-теги | Попробуйте | |
| глификон глификон-книга | Попробуйте | |
| глификон глификон-закладка | Попробуйте | |
| глификон глификон-принт | Попробуйте | |
| глификон глификон-камера | Попробуйте | |
| глификон глификон-шрифт | Попробуйте | |
| глификон глификон-полужирный | Попробуйте | |
| глификон глификон-курсив | Попробуйте | |
| глификон глификон-текст-высота | Попробуйте | |
| глификон глификон-текст-ширина | Попробуйте | |
| глификон глификон-выравнивание по левому краю | Попробуйте | |
| глификон глификон-выравнивание-центр | Попробуйте | |
| глификон глификон-выравнивание по правому краю | Попробуйте | |
| глификон глификон-выравнивание-выравнивание | Попробуйте | |
| глификон глификон-список | Попробуйте | |
| глификон глификон-отступ-влево | Попробуйте | |
| глификон глификон-отступ вправо | Попробуйте | |
| глификон глификон-facetime-видео | Попробуйте | |
| глификон глификон-изображение | Попробуйте | |
| глификон глификон-карта-маркер | Попробуйте | |
| глификон глификон-настроить | Попробуйте | |
| глификон глификон-оттенок | Попробуйте | |
| глификон глификон-редактировать | Попробуйте | |
| глификон глификон-поделиться | Попробуйте | |
| глификон глификон-чек | Попробуйте | |
| глификон глификон-движение | Попробуйте | |
| глификон глификон-шаг назад | Попробуйте | |
| глификон глификон-быстро-назад | Попробуйте | |
| глификон глификон-назад | Попробуйте | |
| глификон глификон-игра | Попробуйте | |
| глификон глификон-пауза | Попробуйте | |
| глификон глификон-стоп | Попробуйте | |
| глификон глификон-вперед | Попробуйте | |
| глификон глификон-быстрая перемотка вперед | Попробуйте | |
| глификон глификон-шаг вперед | Попробуйте | |
| глификон глификон-выталкивание | Попробуйте | |
| глификон глификон-шеврон-левый | Попробуйте | |
| глификон глификон-шеврон-правый | Попробуйте | |
| глификон глификон-плюс | Попробуйте | |
| глификон глификон-минус | Попробуйте | |
| глификон глификон-удалить-знак | Попробуйте | |
| глификон глификон-ок-знак | Попробуйте | |
| глификон глификон-вопросительный знак | Попробуйте | |
| глификон глификон-информационный знак | Попробуйте | |
| глификон глификон-скриншот | Попробуйте | |
| глификон глификон-удалить-круг | Попробуйте | |
| глификон глификон-ок-круг | Попробуйте | |
| глификон глификон-бан-круг | Попробуйте | |
| глификон глификон-стрелка-влево | Попробуйте | |
| глификон глификон-стрелка-вправо | Попробуйте | |
| глификон глификон-стрелка вверх | Попробуйте | |
| глификон глификон-стрелка вниз | Попробуйте | |
| глификон глификон-доля-альт | Попробуйте | |
| глификон глификон-изменить размер-полный | Попробуйте | |
| глификон глификон-изменить размер-маленький | Попробуйте | |
| глификон глификон-восклицательный знак | Попробуйте | |
| глификон глификон-подарок | Попробуйте | |
| глификон глификон-лист | Попробуйте | |
| глификон глификон-огонь | Попробуйте | |
| глификон глификон с открытыми глазами | Попробуйте | |
| глификон глификон-закрыть глаза | Попробуйте | |
| глификон глификон-предупреждающий знак | Попробуйте | |
| глификон глификон-плоскость | Попробуйте | |
| глификон глификон-календарь | Попробуйте | |
| глификон глификон-случайный | Попробуйте | |
| глификон глификон-комментарий | Попробуйте | |
| глификон глификон-магнит | Попробуйте | |
| глификон глификон-шеврон вверх | Попробуйте | |
| глификон глификон-шеврон-вниз | Попробуйте | |
| глификон глификон-ретвитнуть | Попробуйте | |
| глификон глификон-корзина | Попробуйте | |
| глификон глификон-папка-закрыть | Попробуйте | |
| глификон глификон-папка-открыть | Попробуйте | |
| глификон глификон-изменение размера-вертикаль | Попробуйте | |
| глификон глификон-изменение размера-горизонтальный | Попробуйте | |
| глификон глификон-жесткий диск | Попробуйте | |
| глификон глификон-рупор | Попробуйте | |
| глификон глификон-колокольчик | Попробуйте | |
| глификон глификон-сертификат | Попробуйте | |
| глификон глификон-большой палец вверх | Попробуйте | |
| глификон глификон-палец вниз | Попробуйте | |
| глификон глификон-правая рука | Попробуйте | |
| глификон глификон-левая рука | Попробуйте | |
| глификон глификон поднятая рука | Попробуйте | |
| глификон глификон вниз | Попробуйте | |
| глификон глификон-круг-стрелка-вправо | Попробуйте | |
| глификон глификон-круг-стрелка-влево | Попробуйте | |
| глификон глификон-круг-стрелка вверх | Попробуйте | |
| глификон глификон-круг-стрелка-вниз | Попробуйте | |
| глификон глификон-глобус | Попробуйте | |
| глификон глификон-гаечный ключ | Попробуйте | |
| глификон глификон-задачи | Попробуйте | |
| глификон глификон-фильтр | Попробуйте | |
| глификон глификон-портфель | Попробуйте | |
| глификон глификон-полноэкранный | Попробуйте | |
| глификон глификон-приборная панель | Попробуйте | |
| глификон глификон-скрепка | Попробуйте | |
| глификон глификон-сердце-пусто | Попробуйте | |
| глификон глификон-ссылка | Попробуйте | |
| глификон глификон-телефон | Попробуйте | |
| глификон глификон-канцелярская кнопка | Попробуйте | |
| глификон глификон-доллар США | Попробуйте | |
| глификон глификон-фунт стерлингов | Попробуйте | |
| глификон глификон-сортировка | Попробуйте | |
| глификон глификон-сортировка-по-алфавиту | Попробуйте | |
| глификон глификон-сортировка-по-алфавиту-альт | Попробуйте | |
| глификон глификон-сортировка-по-порядку | Попробуйте | |
| глификон глификон-сортировка-по-порядку-альт | Попробуйте | |
| глификон глификон-сортировка-по-атрибутам | Попробуйте | |
| глификон глификон-сортировка-по-атрибутам-альт | Попробуйте | |
| глификон глификон-неотмеченный | Попробуйте | |
| глификон глификон-развернуть | Попробуйте | |
| глификон глификон-свернуть вниз | Попробуйте | |
| глификон глификон-свернуть | Попробуйте | |
| глификон глификон-логин | Попробуйте | |
| глификон глификон-вспышка | Попробуйте | |
| глификон глификон-выход из системы | Попробуйте | |
| глификон глификон-новое окно | Попробуйте | |
| глификон глификон-запись | Попробуйте | |
| глификон глификон-сохранить | Попробуйте | |
| глификон глификон-открыть | Попробуйте | |
| глификон глификон-сохраненный | Попробуйте | |
| глификон глификон-импорт | Попробуйте | |
| глификон глификон-экспорт | Попробуйте | |
| глификон глификон-отправить | Попробуйте | |
| глификон глификон-дискета | Попробуйте | |
| глификон глификон-дискета-сохранение | Попробуйте | |
| глификон глификон-дискета-удалить | Попробуйте | |
| глификон глификон-дискета-сохранить | Попробуйте | |
| глификон глификон-дискета-открыть | Попробуйте | |
| глификон глификон-кредитная карта | Попробуйте | |
| глификон глификон-перенос | Попробуйте | |
| глификон глификон-столовые приборы | Попробуйте | |
| глификон глификон-заголовок | Попробуйте | |
| глификон глификон сжатый | Попробуйте | |
| глификон глификон-наушники | Попробуйте | |
| глификон глификон-телефон-альт | Попробуйте | |
| глификон глификон-башня | Попробуйте | |
| глификон глификон-статистика | Попробуйте | |
| глификон глификон-SD-видео | Попробуйте | |
| глификон глификон-HD-видео | Попробуйте | |
| глификон глификон-субтитры | Попробуйте | |
| глификон глификон-звук-стерео | Попробуйте | |
| глификон глификон-звук-долби | Попробуйте | |
| глификон глификон-звук-5-1 | Попробуйте | |
| глификон глификон-звук-6-1 | Попробуйте | |
| глификон глификон-звук-7-1 | Попробуйте | |
| глификон глификон-знак авторского права | Попробуйте | |
| глификон глификон-регистрационный знак | Попробуйте | |
| глификон глификон-облако-скачать | Попробуйте | |
| глификон глификон-облако-загрузка | Попробуйте | |
| глификон глификон-дерево-хвойное дерево | Попробуйте | |
| глификон глификон-дерево-лиственное | Попробуйте | |
| глификон глификон-cd | Попробуйте | |
| глификон глификон-сохранить-файл | Попробуйте | |
| глификон глификон-открытый-файл | Попробуйте | |
| глификон глификон повышения уровня | Попробуйте | |
| глификон глификон-копия | Попробуйте | |
| глификон глификон-паста | Попробуйте | |
| глификон глификон-предупреждение | Попробуйте | |
| глификон глификон-эквалайзер | Попробуйте | |
| глификон глификон-король | Попробуйте | |
| глификон глификон-королева | Попробуйте | |
| глификон глификон-пешка | Попробуйте | |
| глификон глификон-епископ | Попробуйте | |
| глификон глификон-рыцарь | Попробуйте | |
| глификон глификон-детская формула | Попробуйте | |
| глификон глификон-палатка | Попробуйте | |
| глификон глификон-доска | Попробуйте | |
| глификон глификон-кровать | Попробуйте | |
| глификон глификон-яблоко | Попробуйте | |
| глификон глификон-стирание | Попробуйте | |
| глификон глификон-песочные часы | Попробуйте | |
| глификон глификон-лампа | Попробуйте | |
| глификон глификон-дубликат | Попробуйте | |
| глификон глификон-копилка | Попробуйте | |
| глификон глификон-ножницы | Попробуйте | |
| глификон глификон-биткойн | Попробуйте | |
| глификон глификон-иена | Попробуйте | |
| глификон глификон-рубль | Попробуйте | |
| глификон глификон-шкала | Попробуйте | |
| глификон глификон-мороженое | Попробуйте | |
| глификон глификон со вкусом леденца на палочке | Попробуйте | |
| глификон глификон-образование | Попробуйте | |
| глификон глификон-вариант-горизонтальный | Попробуйте | |
| глификон глификон-опция-вертикаль | Попробуйте | |
| глификон глификон-меню-гамбургер | Попробуйте | |
| глификон глификон модальное окно | Попробуйте | |
| глификон глификон-масло | Попробуйте | |
| глификон глификон-зерно | Попробуйте | |
| глификон глификон-солнцезащитные очки | Попробуйте | |
| глификон глификон-размер текста | Попробуйте | |
| глификон глификон-текст-цвет | Попробуйте | |
| глификон глификон-текст-фон | Попробуйте | |
| глификон глификон-объект-выравнивание-верх | Попробуйте | |
| глификон глификон-объект-выравнивание-снизу | Попробуйте | |
| глификон глификон-объект-выравнивание-по горизонтали | Попробуйте | |
| глификон глификон-объект-выравнивание-влево | Попробуйте | |
| глификон глификон-объект-выравнивание-вертикаль | Попробуйте | |
| глификон глификон-объект-выравнивание-вправо | Попробуйте | |
| глификон глификон-треугольник справа | Попробуйте | |
| глификон глификон-треугольник-левый | Попробуйте | |
| глификон глификон-треугольник-дно | Попробуйте | |
| глификон глификон-треугольник-вершина | Попробуйте | |
| глификон глификон-консоль | Попробуйте | |
| глификон глификон-верхний индекс | Попробуйте | |
| глификон глификон-индекс | Попробуйте | |
| глификон глификон-меню-слева | Попробуйте | |
| глификон глификон-меню-справа | Попробуйте | |
| глификон глификон-меню-вниз | Попробуйте | |
| глификон глификон-меню-вверх | Попробуйте |
Использование значков Font Awesome на вашем веб-сайте
Добавление значков к содержимому вашего сайта обеспечивает визуальную точку фокусировки, которая ориентирует пользователя на определенный раздел и сопутствующий контент.
Использование значков в веб-дизайне — это проверенный метод модернизации веб-сайта и облегчения потока пользователей. Добавление значков к содержимому вашего сайта помогает пользователю лучше обрабатывать информацию, которую вы пытаетесь передать, и обеспечивает визуальную точку фокусировки, которая заставляет пользователя перейти к определенному разделу.
Графические значки можно использовать любым способом, чтобы оживить ваш проект веб-дизайна. Вы можете использовать их как визуальное сопровождение к текстовым областям или как отдельные ссылки в ситуациях, когда места мало, а текстовые блоки невозможны в рамках дизайна. Именно эта универсальность иконок делает их такими полезными и широко распространенными.
К счастью, нет необходимости создавать собственный набор иконок. Font Awesome предоставляет универсальную структуру, которая включает в себя практически любую графику значков, которую вы можете себе представить, а также необходимые возможности масштабирования и настройки.
Font Awesome почти наверняка сэкономит вам время и деньги при использовании определенных иконок. В следующей статье будет рассмотрено использование значков Font Awesome для оптимизации вашего проекта веб-дизайна.
Шаг 1. Добавьте необходимые элементы на свою веб-страницу
Для начала убедитесь, что следующие ресурсы Font Awesome включены на ваш сайт. Никаких загрузок или сложных скриптов не требуется — достаточно одной ссылки на Font Awesome CSS, чтобы начать работу.
Шаг 2. Добавьте выбранный значок
Font Awesome включает в себя сотни значков для использования, охватывающих широкий спектр тем и контента. Для целей этого урока мы добавим значок RSS 9.1848 . Просто включите следующий код на свою страницу везде, где вы хотите, чтобы значок отображался. <я>
Каждый значок использует тег и требует двух классов. Первый, «fa», идентифицирует элемент как значок Font Awesome, а второй, «fa-rss», определяет конкретный значок для загрузки.
Чтобы использовать разные значки, просто найдите соответствующий класс CSS.
Шаг 3. Использование встроенных настроек
Font Awesome имеет ряд встроенных способов настройки значка, таких как увеличение его размера, обеспечение фиксированной ширины значка или добавление анимации к выбранному классу значков. Приведенный ниже код отображает значок «Поддержка» в нескольких размерах.
<я> <я> <я> <я> <я> <я>
Шаг 4. Добавьте любые уникальные настройки
Поскольку эти значки полностью основаны на CSS, вы можете добавить свои собственные стили и классы, чтобы значок полностью работал в вашем проекте веб-дизайна. Например, можно сделать красной иконку «Фильм».
<я>
Выполнив описанные выше шаги, вы получите прочную основу для добавления значков на свой веб-сайт. Обязательно используйте значки только там, где это имеет смысл. Как и в случае с другими визуальными элементами, чрезмерное их использование противоречит намеченной цели и может отвлекать внимание от дизайна вашего сайта.