Большой вопрос про иконки в вебе. Что посоветуете?

Question

[Igor Fedorov]

Всем привет! Довольно давно у меня зреет вопрос. Как правильно использовать икноки в вебе.

Я постоянно подключаю в свои проекты Font Awesome. Однако реалии таковы, что используются максимум 5-10 иконок оттуда. То есть грузится просто так шрифты.

Я пробовал различного рода генераторы, вроде IcoMoon App, однако было замечено, что, грубо говоря, Font Awesome отображается на порядок лучше.

SVG иконки я не знаю, как применять. У шрифта что хорошо - полная управляемость через CSS.

Хочу спросить совета у опытных людей в этом вопросе. Как делаете вы?

Всем заранее спасибо за ответы.

Answer 1

[Mr Crabbz]

fontello.com - выбрали нужные иконки из популярных пакетов, скомпилили свой шрифт, профит!

Answer 2

[Денис Князев]

Раньше делали иконочные шрифты, но это плохая и устаревшая практика, от неё надо отказываться.
лучше спрайт, а иногда можно и просто SVG напрямую подключить.
Пример использования : https://habrahabr.ru/post/141654/

Comments

[Igor Fedorov]

Опять же - диллема просто указать цвет.

[iBird Rose]

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

[Андрей Верх]

Цвет указывается через fill. Или можно наследовать значение цвета, через currentColor

[Денис Князев]

https://css-tricks.com/icon-fonts-vs-svg/

Answer 3

[Алексей Николаев]

Если нужна совместимость с очень старыми браузерами, либо иконки очень сложные по структуре, то спрайты. Если иконки простые (как в том же Font Awesome), то SVG-спрайты.

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

Comments

[littleguga]

Чем плохи иконочные шрифты?

[Алексей Николаев]

littleguga: как и любой шрифт, они отображаются по-разному в зависимости от браузера и ОС. А еще, пока шрифт не загрузился, пользователь наблюдает непонятный ему символ (этого эффекта не будет при использовании спрайтов). И наконец, это несемантично (шрифты не предназначены для отображения графики). Понять, что это иконка, с точки зрения машины, просто невозможно.

[littleguga]

Алексей Николаев: >Понять, что это иконка, с точки зрения машины, просто невозможно.
Вот это не понял.

[Алексей Николаев]

littleguga: аналогия - если аббревиатуру поместить в span, машина не поймет, что это аббревиатура, но если ее поместить в abbr, это будет семантично и понятно роботам, читалкам и всему остальному.

Примерно так же и с иконками. Конечно, это не критично, и при верном подходе не окажет влияния на доступность сайта, но это неправильно с чисто технической точки зрения. Лучше делать правильно, даже если результат будет примерно одинаков.

[littleguga]

Алексей Николаев: ааа, речь была про семантику.

Спасибо за разъяснение.

Answer 4

[Андрей Верх]

Как только разберётесь с SVG, поймёте насколько плохи иконочные шрифты. За СВГ будущее и его уже сейчас можно применять.

Comments

[Igor Fedorov]

У меня основные вопросы - конечная стилизация иконок..

[Андрей Верх]

Igor Fedorov: Стилизация чего? Цвет задаётся через fill:#000 Размеры как у блоков....Что ещё нужно?

[Александр Алексеев]

а какие недостатки у иконочных шрифтов, кроме невозможности изменить иконку?

[Андрей Верх]

shure348: Шрифтовый мыльный рендеринг, геморройное подключение, нетривиальное редактирование иконок (без онлайн сборщика, фиг чего сделаешь), примитивность и ограниченность фигур.

Проще назвать плюсы - широкая поддержка и лёгкое управление через CSS.