Главная » Веб-Дизайн » Cikonss - Библиотека иконок на чистом CSS

Cikonss — Библиотека иконок на чистом CSS

всякие нужны — разные важны )). Не поспоришь, в сайтостроении являются одним из важнейших элементов. Время на месте не стоит, наворченные и не очень дизайнерские тренды, диктуют свои условия, на смену графическим иконкам, в своё время, уверенно пришли легковесные шрифт-, и вот уже, мал-помалу, стали появляться полноценные библиотеки иконок, «нарисованных» исключительно на чистом CSS.

Не так давно, мне на глаза попался интересный ресурс Cikonss, предлагающий готовый набор правил CSS для создания 43 иконок. Ни одного графического файла, только «магия» css))).
 
Библиотека иконок на CSS

Cikonss.css — это ничто иное, как набор стилей, бережно упакованный в один файл, подключив который к своему сайту, вы сможете использовать довольно хорошо «прорисованные» иконки, представленные в пяти различных размерах, от совсем маленьких .icon-small {font-size: 1em;}, до очень больших .icon-huge {font-size: 12em;}.

Доступны три варианта исполнения иконок, по умолчанию, в виде привычных всем шрифт-иконок, и два варианта с фоном, квадратные слегка скруглёнными углами, и иконки на абсолютно круглой фоновой подложке.
 
Cikonss - Библиотека иконок
 
Как пользоваться этим набором?

Прежде всего его нужно скачать и подключить файл стилей сikonss.css к html-странице, поместив в раздел <head></head> следующую строку:
 

<link rel="stylesheet" href="cikonss.css" />

 
Все иконки имеют базовые стили с классом .icon, размер определяется с помощью классов .icon-small, .icon-mid, .icon-large, .icon-extra-large, .icon-huge соответственно, вариации формы определяете с помощью .icon-square — квадратные, .icon-rounded — круглые иконки.
 

<span class="icon icon-mid"><span class="icon-calendar"></span></span>

В итоге получится иконка календаря среднего размера, без фоновой подложки. Если же вам понадобится, абсолютно круглая иконка, маленького размера, достаточно прописать следующее:
 

<span class="icon icon-small icon-rounded"><span class="icon-mail"></span></span>

Все доступные классы можно узнать в разделе предварительного просмотра, непосредственно на сайте Cikonss, или же открыв файл index.html из состава архива. Кстати, весь комплект, аккуратно разбит на отдельные страницы, соответствующие тому или иному размеру иконок, что очень удобно для выбора, да и вообще для работы.

Всё! Если кто не знал, пользуйтесь, надеюсь в хозяйстве пригодится))).

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Один комментарий
  1. Даже и не слышала о таких иконках, спасибо большое за полезную информацию =))

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru