После написания статьи об использовании символов UTF в качестве иконок для дизайна, в комментариях мне посоветовали обратить внимание на сервис Fontello. Он автоматически собирает шрифт, содержащий только выбранные пользователем символы. Напомню для начала, в чём плюсы и минусы такого подхода по сравнению с теми же изображениями.

Плюсы

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

Минусы

  • символы одноцветные;
  • могут несколько различаться в разных операционных системах;
  • символы не ко всем элементам можно добавить;
  • нельзя отредактировать на свой вкус.

Сервис Fontello действует довольно просто: вы отмечаете символы, которые вам нравятся, и нажимаете кнопку «Download webfont» (рис. 1).

Fontello с выбранными шрифтами

Рис. 1. Fontello с выбранными шрифтами

Внутри скачанного архива содержится шрифт fontello в четырёх разных форматах: ttf, svg, eot и woff. Это гарантирует, что в любом браузере, даже устаревшем, какой-то из них будет обязательно работать. Здесь же лежит demo.html, показывающий работу символов в качестве иконок и куча стилевых файлов на все случаи жизни. Некоторые, к примеру, нужны для работы IE7, который не понимает свойство content, а без него у нас возникают сложности с выводом иконок. Впрочем, будем оптимистично считать, что время IE7 уже позади и им никто в зрелом рассудке пользоваться не станет. Так что ориентируемся на современные браузеры, а здесь всё просто.

Нам требуется две вещи: папка font целиком, она, напомню, хранит четыре шрифтовых файла в разном формате, и коды символов. Их можно посмотреть в файле fontello.css или на сайте во вкладке «Customize Codes» (рис. 2).

Код символов

Рис. 2. Код символов

Можно пойти и более простым путём и просто подключить файл fontello.css к сайту или скопировать содержимое в свой CSS и отредактировать по своему желанию.

Добавление иконок через стили делается в три этапа. Стиль я взял напрямую из fontello.css без дополнительного редактирования.

1. Подключаем файл шрифтов

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

Здесь важно правильно указать путь к шрифтам относительно CSS-файла. Браузеры из этого набора выберут и загрузят пользователю тот шрифт, который они понимают. В табл. 1 показано какие браузеры что «любят».

Табл. 1. Поддерживаемые форматы
Формат Internet Explorer Chrome Opera Safari Firefox Android iOS
TTF 9.0+ 4.0+ 10.0+ 3.1+ 3.5+ 2.2+
EOT 5.0-8.0
WOFF 9.0+ 5.0+ 3.6+
SVG 1.0+ 9.0+ 3.1+ 3.5+ 1.0+

2. Для элемента, где будет использоваться иконка, устанавливаем шрифт fontello.

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

Иконки мы будем определять через класс icon-, поэтому такая запись говорит применить стилевые правила ко всем элементам, у которых класс начинается на icon- или icon- встречается в середине. Это на случай, если добавляется несколько классов одновременно. Плюс указывается псевдоэлемент :before, именно через него выводится символ.

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

.icon-search:before { content: '\e803'; } .icon-left-open-big:before { content: '\e801'; } .icon-right-open-big:before { content: '\e802'; } .icon-chart-line:before { content: '\e800'; }

Теперь как это использовать. К любому элементу, где нужно показать иконку, добавляем класс с её именем, например, так.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Иконки</title> <style> @font-face { font-family: 'fontello'; src: url('fonts/fontello.eot'); src: url('fonts/fontello.eot') format('embedded-opentype'), url('fonts/fontello.woff') format('woff'), url('fonts/fontello.ttf') format('truetype'), url('fonts/fontello.svg') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"]:before, [class=" icon-"]:before { font-family: "fontello"; font-style: normal; font-weight: normal; } .icon-search:before { content: '\e803'; } .icon-left-open-big:before { content: '\e801'; } .icon-right-open-big:before { content: '\e802'; } .icon-chart-line:before { content: '\e800'; } </style> </head> <body> <button><i class="icon-search"></i></button> </body> </html>

В данном примере делается кнопка с иконкой.

Сервис Fontello позволяет использовать только выбранные иконки, что существенно сокращает объём загружаемого файла шрифтов. У меня он получился менее 5 Кб и содержал четыре иконки. Объём шрифтов сравним с подобными картинками, файлы которых после оптимизации будут занимать примерно столько же или даже больше. Преимуществом же символов является их масштабируемость и вариабельность — мы можем использовать один и тот же символ множество раз с разными стилевыми параметрами.

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



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Ярмоленко дебютировал за Боруссию, но дортмундцы не Если после пломбировании каналов зуб ноет

Когда отрастет ушибленный ноготь Сок алоэ для лица, рецепты масок и лосьонов для всех типов кожи
Когда отрастет ушибленный ноготь Ответное слово родителей на выпускном в детском
Когда отрастет ушибленный ноготь Уход за престарелыми людьми - Правовед. ru
Когда отрастет ушибленный ноготь Африканские косички (афро косички, афрокосы)
Когда отрастет ушибленный ноготь Работа вахтой в Москве отзывы КредиторПро-2017
Когда отрастет ушибленный ноготь Свадебные мелочи, украшения и декор своими руками
Когда отрастет ушибленный ноготь Bothy Threads Gorjuss Cross Stitch Kits Various Designs - all new
Когда отрастет ушибленный ноготь Скандинавский этикет, этикет, тост, скандинавы
Когда отрастет ушибленный ноготь Как выйти замуж за еврея и уехать на ПМЖ в Израиль