Шрифты или картинки для иконок что оптимальнее?

Question

[webquestions]

Шрифты или картинки для иконок что оптимальнее?
Скорость загрузки интересует

Answer 1

[Андрей Хохлов]

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

Создание svg-спрайта с генерацией fallback для не поддерживающих svg браузеров легко автоматизируется.
Для иконок с градиентами, тенями и т.д. так же не сложно делать png-спрайты с версиями под ретину.

Если устраивает поддержка браузерами - svg symbols. Это все преимущества спрайтов + все преимущества шрифтов.

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

Comments

[webquestions]

Создание svg-спрайта с генерацией fallback для не поддерживающих svg браузеров легко автоматизируется.
не подскажите методы?

[Mark Doe]

webquestions: gulp-svg-sprites, например

[Андрей Хохлов]

webquestions
Gulp + gulp-svg-sprite + gulp-svg2png + кастомный шаблон миксина и переменных (sass в моем случае) + Modernizr (чтобы добавлять класс .no-svg)

@mixin bg-svg($filename) {
width: nth($filename, 5);
height: nth($filename, 6);
background-image: url('#{$pathToImages}sprites/' + nth($filename, 7));
background-size: nth($filename, 3) nth($filename, 4);
background-position: (nth($filename, 1) - 2) (nth($filename, 2) - 2) ; // sprite padding include
background-repeat: no-repeat;
.no-svg & {
background-image: url('#{$pathToImages}sprites/' + nth($filename, 8));
}
}

$main_app-android: -258px -83px 290px 287px 14px 16px 'main.svg' 'main.fallback.png';

Answer 2

[Макс]

Font-awesome на некоторых Apple не отображаются ;)