Подключение и использование иконочных шрифтов

Дорожный знак 100 на дороге уходящей в даль

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

Два наиболее популярных ресурса это Font Awesome и Fontello, первое(и главное) - они бесплатны; второе - Font Awesome - предоставляет публичную ссылку для прямой загрузки шрифта со своего хостинга, то есть не нужно использовать свой или искать сторонний хостинг для размещения необходимых файлов, в Fontello можно собрать свой собственный шрифт, загружая на сайт иконки в .svg формате, или выбрать из общего набора именно те, которые нужны в данном случаи, а не загружать всё что есть.

Как подключить иконочный шрифт к сайту

Способов подключения на данный момент существует три:

1. Если доступна, использовать общую(публичную) прямую ссылку на хостинг сервиса, которую нужно разместить внутри раздела <head>, лучше повыше или перед закрывающим </head>, это уже как пойдет.
Для Font Awesome последняя версия ссылки выглядит так:

2. Скачать архив со всеми необходимыми файлами, извлечь содержимое папок CSS и Fonts, разместить извлеченные файлы на хостинге своего сайта в соответствующие папки и указать на них ссылки в секции <head>...</head> вашего сайта следующим образом -

- дать путь только к папке:


<link rel="stylesheet" href="../css/font-awesome/css/font-awesome.min.css">

- удаленно подключить файлы с CSS из соответствующей папки:


<link rel="stylesheet" href="..путь-к-файлу/animation.css" type="text/css" />
<link rel="stylesheet" href="..путь-к-файлу/fontello.css" type="text/css" />
<link rel="stylesheet" href="..путь-к-файлу/fontello-codes.css" type="text/css" />
<link rel="stylesheet" href="..путь-к-файлу/fontello-embedded.css" type="text/css" />
<link rel="stylesheet" href="..путь-к-файлу/fontello-ie7.css" type="text/css" />
<link rel="stylesheet" href="..путь-к-файлу/fontello-ie7-codes.css" type="text/css" />

3. После загрузки архива с фалами, извлечь только содержимое папки Fonts и подключить иконочный шрифт, используя правило CSS @font-face:

@font-face {
  font-family: 'fontello';
  src: url('..путь-к-файлу/fontello.eot');
  src: url('..путь-к-файлу/fontello.woff') format('woff'),
  url('..путь-к-файлу/fontello.ttf') format('truetype'),
  url('..путь-к-файлу/fontello.svg#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

Как использовать иконочный шрифт на сайте

У каждого выбранного символа есть название и код, посмотреть их можно как на странице официального сайта, так и на демо странице из загруженного архива. Название, по совместимости, является так же и добавочным классом элемента, для которого нужна иконка, код используется как UTF-символ иконки. Способы добавления символов на страницу зависят от варианта подключения шрифта.

Если воспользоваться вторым вариантом - подключить шрифт используя CSS-файлы, возможно добавление знаков как с помощью класса, так и кода:

1. Создать пустой элемент с классом иконки и добавить его перед нужным блоком:

<ul>
<li><i class="icon-home"></i><a href="..may-01.html">Майский сайт</a></li>
</ul>

2. Добавить класс с названием символа к нужному элементу:

<ul>
<li class='icon-link'><a href="..some-link.html">Майский сайт</a></li>
</ul>

3. Добавить в CSS псевдоэлемент для элемента с иконкой, который будет содержать UTF-код желаемого символа и указывать на используемый шрифт (в данном примере - Fontello):

ul li a::before {
  content: '\e80a';
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
}

Если для подключения шрифта иконок использовать третий вариант - только файлы шрифтов, то для того, чтобы можно было добавлять иконки по средствам присвоения соответствующего класса-названия, в CSS нужно внести дополнительную конструкцию устанавливающую подключенный шрифт для этих элементов и для каждого указать относящийся к нему символ:

[class^="icon-"]::before,
[class*=" icon-"]::before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
}
.icon-doc-inv::before {
  content: '\e801';
}
.icon-mail-alt::before {
  content: '\e805';
}

но можно обойтись и без нее, запись вида:

/*иконки будут добавлены*/
.icon-doc-text-inv::before { content: '\e80e'; font-family: "fontello"; }
ul li a::before { content: '\e801'; font-family: "fontello"; }

- будет работать все равно.

Как подключить иконочный шрифт к Blogger(Blogspot)

В Blogger никаких трудностей с подключением шрифтовых картинок нет, все способы описанные выше вполне подходят. Основная сложность заключается в отсутствии собственного хостинга, но эта проблема легко решается с помощью прямых ссылок с ГуглДиск и других или загрузки файлов и получения ссылок с Гугл Сайтов, все остальное - дело техники
©http://magentawave.com

2 комментария:

lulla15.03.2019, 14:17
спасибо большое за инструктаж,все получилось(хотя надо отдать должное и самому сайту "www:fontawesome.com"-там тоже по полочкам все разложили
ОтветитьУдалить
Ответы
Unknown24.03.2021, 08:26
вот последняя на теперь https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
ОтветитьУдалить
Ответы

Добавить комментарий

MagentaWAVE