Шрифт Awesome 6 обзор
- 1 Как установить шрифт Awesome
- Способ 1.
- Способ 2.
- 2 Как использовать иконки Font Awesome
- 1 Стандартные иконки
- 2 Большие иконки
- 3 Иконки с фиксированной шириной
- 4 Иконки для маркированного списка
- 5 значков и цитат в рамке
- 6 Анимированные иконки
- 7 Трансформированные иконки
- 8 Комбинированные иконки
- 3 Коллекция Font Awesome 4.5.0, классы и css-код для вставки с помощью свойства content
- 4 Похожие ресурсы
- Размер иконок
- Цвет иконок
- Часто Задаваемые Вопросы
Шрифт Awesome — это коллекция масштабируемых векторных иконок. Иконки можно форматировать с помощью css-свойств, устанавливать для них цвет, размер, тень и многое другое. Шрифт версии 5.5.0 включает 605 иконок.
1 Как установить шрифт Awesome
Способ 1.
Использовать версию файла font-awesome.css, для этого нужно добавить следующий код в раздел <head>:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">После того, как шрифт подключен, вы можете использовать иконки на своём сайте.
Способ 2.
Скачать шрифт с сайта Font Awesome. Распаковать архив и закачать на сервер сайта две папки из архива – css и fonts. Если у вас на сайте уже есть папки с такими названиями, то нужно просто добавить в них файлы из скаченных папок.
Вы можете использовать полную или минимизированную версию файла:
<link rel="stylesheet" href="http://ваш_сайт/css/font-awesome.css"><link rel="stylesheet" href="http://ваш_сайт/css/font-awesome.min.css">2 Как использовать иконки Font Awesome
Иконки можно добавить на веб-страницу двумя способами: задать соответствующие классы для элементов <i> и <span> или добавить к нужному элементу с помощью псевдоэлементов :before, :after и соответствующего значения свойства content.
<i class="fa fa-home fa-fw"></i> li:before{content:"\f015";/* добавляем иконку дом */font-family:FontAwesome;color:#aaaaaa;margin-right:10px;}1 Стандартные иконки
Font Awesome предназначен для использования со строчными элементами. Для того, чтобы добавить иконки, сначала нужно задать класс fa для элемента <i> или <span>.
Чтобы добавить выбранный значок до или после элемента, пустой<i></i> или же<span></span> Элемент добавляется к элементу, которому присваивается класс значков, а также дополнительный класс, который расширяет стиль.
<i class="fa fa-camera-retro"></i>2 Большие иконки
Чтобы увеличить размер иконки относительно её контейнера, используйте классы fa-lg (33% увеличение), fa-2x, fa-3x, fa-4x, fa-5x.
<i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera-retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>3 Иконки с фиксированной шириной
Используйте класс fa-fw, чтобы зафиксировать ширину иконки. Это может пригодиться для оформления навигации или списков на сайте.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Главная</a></li> <li><a href="#"><i class="fa fa-book fa-fw"></i> Библиотека</a></li> <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Приложения</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Настройки</a></li></ul>4 Иконки для маркированного списка
Используйте классы FA-UL и FA-LI, чтобы заменить пули по умолчанию в<ul>…</ul> маркированный список.
<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>5 значков и цитат в рамке
Воспользуйтесь классом fa-border, чтобы установить рамку для иконки. Классы pull-right и pull-left добавят кавычки для текста.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien.</p>6 Анимированные иконки
Добавьте классы fa-spin, fa-pulse, fa-refresh, fa-cog, чтобы установить вращающиеся иконки. Анимация не поддерживается в IE8 – IE9.
<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>7 Трансформированные иконки
Чтобы повернуть или перевернуть иконки, используйте классы 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>8 Комбинированные иконки
Можно комбинировать иконки, накладывая одну на другую. Используйте класс fa-stack для родительской иконки, класс fa-stack-1x – для стандартного размера и fa-stack-2x для увеличенного размера.
<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> <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> <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> <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>3 Коллекция Font Awesome 4.5.0, классы и css-код для вставки с помощью свойства content
Иконки для веб-приложений Fa-adjust - \f042;Fa-anchor - \f13d;
Fa-archive - \f187;
Fa-arrows - \f047;
Fa-asterisk - \f069;
Fa-at - \f1fa;
Fa-balance-scale - \f24e;
Fa-ban - \f05e;
Fa-bank - \f19c;
Fa-barcode - \f02a;
Fa-battery-empty - \f244;
Fa-battery-half - \f242;
Fa-battery-quarter - \f243;
Fa-battery-three-quarters - \f241;
Fa-battery-full - \f240;
Fa-bed - \f236;
Fa-beer - \f0fc;
Fa-bell - \f0f3;
Fa-bell-slash - \f1f6;
Fa-binoculars - \f1e5;
Fa-birthday-cake - \f1fd;
Fa-bolt - \f0e7;
Fa-bomb - \f1e2;
Fa-book - \f02d;
Чтобы повернуть или перевернуть иконки, используйте классы FA-rotate-* и fa-flip-*.
4 Похожие ресурсы
В дополнение к коллекции Font Awesome, вы можете использовать и другие иконочные шрифты.
Fontello.На сервисе Fontello представлена большая коллекция разнообразных иконочных шрифтов. Вы можете отобрать понравившиеся иконки и загрузить их на свой компьютер.
Foundation Icon.Foundation Icon – ещё одна коллекция иконочного шрифта от разработчиков фреймворка Foundation. Помимо стандартных иконок, на сайте представлены круглые иконки, иконки социальных сетей и многое другое.
Material icons.Material icons унифицированные плоские иконки от Google, воплотившие в себе простоту восприятия. Иконки оптимизированы для красивого отображения на всех распространённых платформах и для любых разрешений экрана.
Колекция иконочных шрифтов содержит 750+ иконок. Самый простой способ установить коллекцию на свой сайт – использовать иконки как Google Web Fonts. Для этого в разметку страницы включается следующий код:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Для корректного отображения шрифта в браузерах элементу, который будет использовать иконочный шрифт, задаётся класс material-icons:
.material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Предпочтительный размер иконок */ display: inline-block; width: 1em; height: 1em; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; /* Поддержка всеми WebKit браузерами */ text-rendering: optimizeLegibility; /* Поддержка Safari и Chrome */ -moz-osx-font-smoothing: grayscale; /* Поддержка Firefox. */ font-feature-settings: 'liga'; /* Поддержка IE. */}Сами иконки добавляются с помощью тега <I class=’’material-icons’’>лигатура или html-код иконки </i>, например:
<i class="material-icons">account_balance_wallet</i><i class="material-icons"></i>Лигатуру понимают все современные браузеры, IE – начиная с 10 версии. Код иконки генерируется автоматически, для этого вам нужно нажать левой кнопкой мыши на рисунок иконки и скопировать предложенный вид.
Размер иконок
Размер иконок контролируется с помощью дополнительных классов:
.material-icons.md-18 {font-size: 18px;} /* для <i class="material-icons md-18"></i> */.material-icons.md-24 {font-size: 24px;} /* для <i class="material-icons md-24"></i> */.material-icons.md-36 {font-size: 36px;} /* для <i class="material-icons md-36"></i> */.material-icons.md-48 {font-size: 48px;} /* для <i class="material-icons md-48"></i> */Цвет иконок
Цвет иконок также задаётся с помощью дополнительных классов:
.material-icons.md-dark {color: rgba(0, 0, 0, 0.54);} /* <i class="material-icons md-dark"></i> */.material-icons.md-light {color: rgba(255, 255, 255, 1);} /* <i class="material-icons md-light"></i> */.material-icons.md-dark.md-inactive {color: rgba(0, 0, 0, 0.26);} /* <i class="material-icons md-dark md-inactive"></i> */.material-icons.md-light.md-inactive {color: rgba(255, 255, 255, 0.3);} /* <i class="material-icons md-light md-inactive">face</i> */Чтобы установить пользовательский цвет, нужно добавить класс, определяющий цвет иконки, например:
.material-icons.indigo {color: #1A237E;} /* <i class="material-icons indigo"></i> */Часто Задаваемые Вопросы
- Что такое шрифт в простых терминах?
- По сути, это шрифт со значками, которые можно добавить в любой элемент веб -страницы, чтобы повысить его видимость и дизайн. Коллекция состоит из нескольких сотен икон, подходящих для любой задачи и цели.Больше информации по этой ссылке
Мишель Пинсон - энтузиаст путешествий и создатель контента. Объединяя страсть к образованию и исследованиям, он отправился на то, чтобы обмениваться знаниями и вдохновлять других через очарование образовательного содержания. Сближение мира ближе друг к другу, расширяя возможности людей с глобальной экспертизой и чувством страсти.
