1000 иконок, объединенные в 1 css спрайт

1000 интерфейсных иконок, представленные в виде css спрайта

Долго мучался над этой сборкой, но это стоило того. Перед вами золотая жила интерфейса - 1000 интерфейсных иконок в виде одного css спрайта. 1000 иконок в одном изображении - О чудо!

Css спрайты - это объединение нескольких фоновых изображений для безперебойной загрузки этих самых изображений на сайте. Проще говоря: ваши изображения, заключенные в спрайт - загрузятся одной картинкой и больше не будут подгружатся у посетителя на всем протяжении прсмотра вашего сайта.

Обязательно посмотрите "ДЕМО" - вы наверняка там найдете нужный вам иконки. В архиве вы найдете html файл с css стилями внутри и html кодом. Одна картинка - это одна строчка кода (пример: <div class="sprite-28"></div>). Sprite-28 - это css параметр с позицией определенной картинки.

Я вам скажу как проще всего пользоваться этими иконками:

1. Скачайте архив и поместите изображение "css-sprite" в корень сайта или в папку с изображениями

2. Нажмите на "ДЕМО" в Google Chrome, выберите понравившуюся иконку, кликните правой кнопкой мыши на эту иконку и нажмите в появившемся окне "Просмотр кода элемента"

3. Скопируйте html код в нужное вам место (или просто скопируйте class="sprite-28"), а в правой колонке скопируйте css параметры этого класса. Иконка готова к применению.

Прелесть этих иконок в том, что во первых: их много, во вторых: они сжаты в один файл и подгрузки иконок не происходит и в третьих: вам не нужно постоянно искать иконки, прописывать им пути и вставлять на сайт, вам лишь нужно указать class в блоке <div>, <p> или <span>.

Перечислю хотя бы некоторые иконки, которые есть в этой замечательной коллекции: всевозможные папки, rss, флаги, аватарки, принтер, фотоаппарат, корзина товаров, часы, будильник, текстовые файлы, ярлыки, иконки всевозможных программ, футбольный мяч, баскетбольный мяч, автомобиль. Я посмотрел на количество перечисляемого и решил прекратить)))) вам нужно самим взглянуть и выбрать! Здесь есть действительно ВСЁ, что может понадобиться абсолютно на любом сайте любой тематики.

Желаю приятной работы!

Похожие статьи