Сервис Fontello в качестве иконок для дизайна

17.10.2017 Разработка / Код / Web

Использование шрифтов как символов или иконок в дизайне веб-страницы очень удобно по нескольким причинам:

  • можно использовать неоднократно;
  • масштабировать как угодно, при этом без потери качества;
  • можно применять стили CSS: менять цвет, давать тень, поворачивать, создавать фон;
  • добавлять к элементам страницы через псевдоэлементы ::before и ::after

Заходим на страницу http://fontello.com/ и выбираем подходящие символы. Затем нажимаем на кнопку Download webfont.

Сервис Fontello в качестве иконок для дизайна

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

Сервис Fontello в качестве иконок для дизайна

Папка со шрифтами содержит пять файлов. Это один шрифт в разных форматах: ttf, svg, eot, woff и woff2, что собственно призвано решить проблему отображения в любом браузере, даже устаревшем.

Сервис Fontello в качестве иконок для дизайна

Как будут выглядеть выбранные шрифты можно увидеть открыв файл demo.html, а можно на странице скачивания на вкладке Customize Codes

Сервис Fontello в качестве иконок для дизайна

На вкладке Customize Names указаны названия символов для их использования

Сервис Fontello в качестве иконок для дизайна

Подключение и вывод на страницу символов из Fontello

Теперь можно подключить файл fontello.css к сайту в заголовке <head>:

<head>
...
<link href="css/fontello.css" rel="stylesheet" type="text/css">
…
</head>

Либо добавить стили в основной файл стилей, обычно это style.css из fontello.css:

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?5040357');
  src: url('../font/fontello.eot?5040357#iefix') format('embedded-opentype'),
       url('../font/fontello.woff2?5040357') format('woff2'),
       url('../font/fontello.woff?5040357') format('woff'),
       url('../font/fontello.ttf?5040357') format('truetype'),
       url('../font/fontello.svg?5040357#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

Для использования иконки устанавливаем шрифт fontello:

 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;

Запись говорит, что применять стилевые правила нужно ко всем элементам, у которых класс начинается на icon- или icon- встречается в середине. Через псевдоэлемент :before выводится символ.

Вывод самих символов осуществляется через свойство content в связке с :before

.icon-phone:before { content: '\e800'; } /* '' */
.icon-down-open:before { content: '\e801'; } /* '' */
.icon-right-dir:before { content: '\e802'; } /* '' */
.icon-file-pdf:before { content: '\f1c1'; } /* '' */
.icon-file-word:before { content: '\f1c2'; } /* '' */

Использование

Вывод иконки происходит путём добавления класса с её именем.
Например:

<div class="letter">
	<i class="icon-phone"></i>
</div>

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

СВами

Web