регистрация
856материалов
3264комментария
230тем на форуме
6752пользователя

Шрифт Font Awesome для вашего сайте


Описание:

Есть одна из разновидностей шрифтов, содержащие разнообразные иконки, а не буквы, и имя ему — Font Awesome. Под иконками имеются в виду разнообразные системные символы, такие как звезды, галочки, а также технические изображения, такие как автомашины, телефоны и др.

Шрифт можно внедрить в сайт и использовать для расширенного отображения символов веб-портала. Приведем пару примеров этого процесса, для наглядности. Испытуемый шрифт — Font Awesome, которая является одним из нескольких вариантов таких иконочных шрифтов.

Официальный сайт посвященный font awesome icons — fontawesome.io.

Как подключить Font Awesome:

Разберем технические моменты внедрения шрифта-иконки на веб-сайт. Для того, чтобы вставить font awesome на сайт необходимо прописать в header вот такой код:
Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Этот способ внедряет сторонний скрипт с другого сайта. Сам шрифт скачивается с его официального сайта, но также имеется возможность его запуска с сайта. Для этого необходимо скачать шрифт и следовать инструкциям на сайте шрифта.

Официальный сайт имеет раздел Icons, где в большом количестве находятся иконки, они разделяются по классам. Один из них, к примеру, fa fa-folder-open.

Подобные классы можно назначит любому элементу, просто прописав в его коде такой тег:
Код
<i class="fa fa-folder-open">

В результате, стили задаются автоматически. Величина иконок также регулируются добавлением классов, авторы шрифта добавили 4 класса предназначенные для увеличения иконок: fa-2x, fa-3x, fa-4x,fa-5x. Увеличение шрифтов происходит интервалами в x2, x3, x4, x5. Код иконки соответственно изменяется так:
Код
<i class="fa fa-folder-open fa-2x">

Помимо этого есть также второй способ вывода шрифтов иконок, она осуществляется посредством таких псевдоэлементов как: :after и :before.

Например, у нас есть блок test, чтобы рядом с ним вывести иконку, пропишем следующие стили:
Код
.test:after{
       padding-right: 7px;
       content: "\f005";
       font-style: normal;
       font-weight: normal;
       text-decoration: inherit;
       font-family: FontAwesome;
       font-size:40px;}

Иконка выводится с помощью unicode в третьей строке. Уникальный код шрифта можно взять на официальном сайте, которые размещены под выбранными иконками.

Выполнив все вышеописанное вы легко сможете интегрировать иконки шрифта на свой сайт. Иконки существенно ускоряют загрузку, в то время как изображения, используемые вместо таких шрифтов, сильно снижают скорость загрузки страниц.


Графику опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о графике:
Дата добавления материала: 16.02.2017 в 12:00
Материал просмотрен: 389 раз
Категория материала: Графика для сайта
К материалу оставлен: 1 комментарий

Пожаловаться
Сказать спасибо

1 комментарий


avatar
-50% на шаблоны от TemplateMonster
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 2
Гостей: 2
Пользователей: 0