Срок работы пробной версии продукта истек. Через две недели этот сайт полностью прекратит свою работу. Вы можете купить полнофункциональную версию продукта на сайте www.1c-bitrix.ru. Наборы CSS иконок

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

Наборы 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

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 можно собрать собственный шрифт с необходимыми иконками.
 2744 CSS, Icono, Дизайн, Font Awesome, Fontello
22 апреля 2015
Команда BXCert

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

Возможно Вам будет интересно

Комментарии

Миха Васильев 06 мая 2015 в 23:26 / # / Ответить
Мне кажется глупо подключать кучу файлов ради иконок, ведь есть старые добрые спрайты!
Команда BXCert 07 мая 2015 в 09:24 / # / Ответить
Да, спрайты тоже имеют ряд своих преимуществ, но если Вам надо иконки разных размеров, то спрайты становятся менее удобными. Преимущества шрифтов иконок в том, что можно выводить иконки разного размера без дополнительных манипуляций.
Чтобы оставлять комментарии необходимо зарегистрироваться и пройти авторизацию.