Большой вопрос про иконки в вебе. Что посоветуете?
Всем привет! Довольно давно у меня зреет вопрос. Как правильно использовать икноки в вебе.
Я постоянно подключаю в свои проекты Font Awesome. Однако реалии таковы, что используются максимум 5-10 иконок оттуда. То есть грузится просто так шрифты.
Я пробовал различного рода генераторы, вроде IcoMoon App, однако было замечено, что, грубо говоря, Font Awesome отображается на порядок лучше.
SVG иконки я не знаю, как применять. У шрифта что хорошо - полная управляемость через CSS.
Хочу спросить совета у опытных людей в этом вопросе. Как делаете вы?
Раньше делали иконочные шрифты, но это плохая и устаревшая практика, от неё надо отказываться.
лучше спрайт, а иногда можно и просто SVG напрямую подключить.
Пример использования : https://habrahabr.ru/post/141654/
учитывая что щас львиная доля сайтов все еще используют png, говорить что иконочные шрифты устарели - как то не этично по моему. сам думаю что на данный момент это лучшее решение - сразу собрать все иконки - сделать шрифт - и использовать их. тот же Font Awesome получается. только собственного производства.
Если нужна совместимость с очень старыми браузерами, либо иконки очень сложные по структуре, то спрайты. Если иконки простые (как в том же Font Awesome), то SVG-спрайты.
Иконочный шрифт, на мой взгляд, это худшая из всех возможных практик (хоть и подкупает простотой и гибкостью), хуже только хранить состояния иконки в разных файлах. Никогда их не использовал, и вам не советую.
littleguga: как и любой шрифт, они отображаются по-разному в зависимости от браузера и ОС. А еще, пока шрифт не загрузился, пользователь наблюдает непонятный ему символ (этого эффекта не будет при использовании спрайтов). И наконец, это несемантично (шрифты не предназначены для отображения графики). Понять, что это иконка, с точки зрения машины, просто невозможно.
littleguga: аналогия - если аббревиатуру поместить в span, машина не поймет, что это аббревиатура, но если ее поместить в abbr, это будет семантично и понятно роботам, читалкам и всему остальному.
Примерно так же и с иконками. Конечно, это не критично, и при верном подходе не окажет влияния на доступность сайта, но это неправильно с чисто технической точки зрения. Лучше делать правильно, даже если результат будет примерно одинаков.
Простой
