Сейчас многие современные сайты имеют в своей вёрстке CSS иконки. Они подгружаются с внешних ресурсов или из локальной папки, если специальные шрифты предварительно скачены.
Есть много популярных сборников иконок, например: FontAwesome, Genericons, Material и другие. Я задался целью понять, что же лучше для сайта, загружать подобные иконки с помощью CSS или всё-таки воспользоваться старым и добрым методом — изображениями.
Преимущество CSS иконок в том, что во-первых их очень много на любой вкус, во-вторых они масштабируются без потери качества и в-третьих их легко вывести.
Из минусов CSS иконок. На различных устройствах они могут отображаться по-разному. Более существенный минус: дополнительно тянется несколько других файлов (шрифтов, css).
Для того чтобы определиться, что лучше, я сначала я вывел иконку с помощью CSS, а затем нашел такое же изображение и вывел его рядом. В результате получил абсолютно одинаковые иконки, скриншот которых можно увидеть ниже:
Первая иконка подключается следующей командой через файл functions.php в теме WordPress:
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' );
}
Затем, чтобы её вывести я добавил в CSS файл следующее:
content: '\f115';
font: normal 14px/1 FontAwesome;
padding: 0 3px 0;
}
Вторая иконка на изображении это обычное jpg изображение, у которого были следующие стили:
height: 16px;
opacity: .6;
vertical-align: text-top;
width: 16px;
}
В итоге они заимели одинаковые цвета и приняли равное вертикальное расположение относительно текста.
В своём выборе я остановился на изображениях.
Для изображения в стилях CSS иконку сделал в 16 пикселей. Однако она сама имеет размер в 96 пикселей. На всякий случай. Вдруг плотность пикселей какого-нибудь монитора увеличиться в 6 раз. Не хочу чтобы картинки на сайте имели неподобающий вид.
И что мы получаем в результате вывода изображения, которое в 6 раз больше необходимого? Всего 3 кб и те загружаются только на определенной странице, где выведено это изображение. В то же самое время, чтобы вывести иконку с помощью CSS придется загрузить порядка 100 кб и больше. Вроде это и не много, но сейчас каждый сайт имеет столько скриптов, что лишние 100 кб, тоже значительный вес.
На мой взгляд имеет смысл грузить CSS иконки, если они предварительно скачены к себе на сайт и на сайте их выводится очень много. В противном случае, на мой взгляд изображения предпочтительны.
