Наборы CSS иконок

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

Icono - 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:

• Большое количество иконок.
• Наличие анимированных иконок - необходима поддержка анимации CSS3.
• Различные размеры.
• Возможность поворачивать иконки.
• Возможность подключения через CDN.

На официальном сайте шрифта можно найти все необходимые примеры, список иконок, ссылку для подключения через CDN и многое другое!

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

Подведем итог

• Для сокращения запросов к серверу можно воспользоваться не обычными png иконками, а CSS наборами или иконками шрифтами.
• Использование CSS наборов и шрифтов иконок позволяет использовать одинаковые по стилю иконки на всем проекте.
• При помощи Fontello можно собрать собственный шрифт с необходимыми иконками.

Команда BXCert

Наша команда разрабатывает портал BXCert, а также занимается разработкой сайтов на CMS 1С-Битрикс. Все участники являются сертифицированными специалистами Bitrix.