Основной плюс использования CSS иконок - это сокращение запросов к серверу, так как не надо качать кучу иконок, достаточно запросить CSS файл и файл шрифта в случае когда набор иконок реализован как шрифт. Также мы бы отнесли к плюсам то, что иконки в таких наборах выглядят гармонично и одинаково - исключая ситуацию "кто в лес, кто по дрова".
Рассмотрим красивый и современный набор иконок реализованный на чистом CSS - Icono. Данный набор содержит около 130 иконок реализованных на CSS, использовать его очень просто, достаточно подключить файл:
< link rel="stylesheet" href="icono.min.css">
И в необходимом месте в HTML назначить класс, например, отобразим иконку RSS:
< i class="icono-rss">
Как видим достаточно просто указать класс .icono-rss. Сжатый CSS занимает 56 килобайт, что конечно не мало, но так как у данного проекта есть репозиторий на Github и он распространяется под лицензией MIT, то нам не составит труда составить собственный CSS только с необходимыми нам иконками, тем самым можно значительно сократить размер файла.
Font Awesome - отличный иконочный шрифт. Данный шрифт содержит большое количество иконок на все случаи жизни и как и Icono легок в использовании. Для начала необходимо скачать скрипт с Github закинуть на свой сайт и подключить CSS файл:
< link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Использовать данный шрифт очень просто, выбираем необходимую иконку и назначаем класс - все! Для примера опять рассмотрим вывод иконку RSS:
< i class="fa fa-rss">
Тут не должно возникнуть проблем, отметим отличия и дополнительные возможности Font Awesome:
На официальном сайте шрифта можно найти все необходимые примеры, список иконок, ссылку для подключения через CDN и многое другое!
Иконочные шрифты весят достаточно много, но есть способ сократить размер, для этого можно воспользоваться сервисом Fontello. Все просто: Вы выбираете те иконки, которые Вам необходимы и скачиваете полученный шрифт себе.
Возможно Вам будет интересно