Шрифт Awesome — это коллекция масштабируемых векторных иконок. Иконки можно форматировать с помощью css-свойств, устанавливать для них цвет, размер, тень и многое другое. Шрифт версии 4.5.0 включает 605 иконок.
После того, как шрифт подключен, вы можете использовать иконки на своем сайте.
Способ 2.
Скачать шрифт с сайта Font Awesome. Распаковать архив и закачать на сервер сайта две папки из архива — css и fonts. Если у вас на сайте уже есть папки с такими названиями, то нужно просто добавить в них файлы из скачанных папок.
Иконки можно добавить на веб-страницу двумя способами: задать соответствующие классы для элементов <i> и <span> или добавить к нужному элементу с помощью псевдоэлементов :before, :after и соответствующего значения свойства content.
Font Awesome предназначен для использования со строчными элементами. Для того, чтобы добавить иконки, сначала нужно задать класс fa для элемента <i> или <span>.
Чтобы добавить выбранную иконку перед элементом или после него, к элементу добавляется пустой элемент <i></i> или <span></span>, которому назначен класс иконки, а также дополнительный класс, расширяющий стилевое оформление.
fa-camera-retro
<i class="fa fa-camera-retro"></i>
2. Большие иконки
Чтобы увеличить размер иконки относительно ее контейнера, используйте классы fa-lg (33% увеличение), fa-2x, fa-3x, fa-4x или fa-5x.
Используйте классы 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 добавят кавычки для текста.
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><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>
Можно комбинировать иконки, накладывая одну на другую. Используйте класс fa-stack для родительской иконки, класс fa-stack-1x — для стандартного размера и fa-stack-2x для увеличенного размера.
В дополнение к коллекции Font Awesome, вы можете использовать и другие иконочные шрифты.
1. Fontello
На сервисе Fontello представлена большая коллекция разнообразных иконочных шрифтов. Вы можете отобрать понравившиеся иконки и загрузить их на свой компьютер.
2. Foundation Icon
Foundation Icon — еще одна коллекция иконочного шрифта от разработчиков фреймворка Foundation. Помимо стандартных иконок, на сайте представлены круглые иконки, иконки социальных сетей и многое другое.
3. Material icons
Material icons унифицированные плоские иконки от Google, воплотившие в себе простоту восприятия. Иконки оптимизированы для красивого отображения на всех распространенных платформах и для любых разрешений экрана.
Коллекция иконочных шрифтов содержит 750+ иконок. Самый простой способ установить коллекцию на свой сайт — использовать иконки как Google Web Fonts. Для этого в разметку страницы включается следующий код:
Лигатуру понимают все современные браузеры, IE — начиная с 10 версии. Код иконки генерится автоматически, для этого вам нужно нажать левой кнопкой мыши на рисунок иконки и скопировать предложенный код.
3.1. Размер иконок
Размер иконок контролируется с помощью дополнительных классов:
.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> */
3.2. Цвет иконок
Цвет иконок также задается с помощью дополнительных классов:
Этот сайт использует куки для улучшения вашего опыта. Читая этот сайт вы даете согласие на использование файлов Cookie, но вы можете отказаться, если хотите.Принять
Privacy & Cookies Policy
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
