Топ загрузчиков

1-е место

2-е место

FontBot3-е место

Хондамир Нарзиев4-е место

Юлия Игорева5-е место

Дмитрий Руленко6-е место

7-е место

8-е место

Cаня Сиркин9-е место

Степан Иванов10-е место

Топ по репутации

Сейчас онлайн: 4

Все пользователи

Посетители:

QR-код страницы

Скачать QR-сканер

Привет! Я приветствую тебя на нашем сайте Fonts.clan!

Друзья сайта

Урааа!!! - сайт о uCoz

Webmaster - всё для вашего сайта

Привет, Уважаемый Гость нашего сайта! Добро пожаловать на FONTS.clan!
На нашем сайте зарегистрировано: 749 пользователей, которые оставили 76 комментариев
В базе Fonts.clan: 643 материала, а также 341 обоев!

Вы все еще не с нами? Так чего вы ждете? Зарегистрируйтесь, чтобы получить возможность скачивать уникальные материалы, загруженные на сайт!

Зарегистрироваться

Загрузил: LANIGIRO

Скачать подборку

Icons In Sprite

Категория: Сборники иконок

Раздел: Прочие

Статистика

99+

просмотров

99+

скачиваний

комментов

0.0

рейтинг

СИМПАТИЧНЫЕ ИНТЕРФЕЙСНЫЕ ИКОНКИ, ЗАКЛЮЧЕННЫЕ В ОДИН СПРАЙТ

Хорошую вещь я откопал. Интерфейсные иконки, заключенные в один спрайт. Если кто не знает, что такое спрайт - это одна картинка, в которой есть несколько изображений, отображающиеся на сайте отдельно посредством css. Не знаю, понятно ли я объяснил, но вы на примере этой сборке можете узнать, что такое спрайт.

Преимущества спрайтов

Давно я не выкладывал иконки, наверное потому, что все иконки, которые были мне нужны уже были на моем сайте :)) но вот понадобились иконки в одном спрайте и я нашел эти и делюсь ими с Вами. Кстати отличительная черта и самый существенный плюс спрайта, это то, что если загрузилась картинка спрайт один раз, то все элементы этого спрайта больше не будут подгружатся и соответственно будут уменьшать скорость html страницы. Обычно спрайты используют для кнопок, которые меняются при наведении. Иногда бывает такое, что кнопка в обычном состоянии и кнопка при наведении - это две разные картинки и вы могли заметить на каких-либо сайтах, когда наводишь на кнопку, изображение появляется не сразу - оно подгружается. Со спрайтом такой проблемы не будет. Еще один плюс спрайтов - экономия места. Скажем у вас есть какой то плагин, типа слайдера, и к нему идут несколько десятков изображений (уголки рамок, сами рамки, стрелки, буллиты, икокни соц сетей и так далее). Так вот, когда они все заключены в одну картинку, это намного удобнее и аккуратнее смотрится, если бы они валялись в папке с изображениями по отдельности.

Что изображено на этих иконках

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

Подключаются эти иконки очень просто:

1. Подключаем css файл sprite.css таким образом: создаем папку css в корне вашего сайта, закидываем туда этот файл css, а на странице, где будут отображаться иконки между тегами <head> вставляем следующий код:

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

2. Далее создаем папку img в корне вашего сайта и кидаем туда изображение sprit.png

3. В месте, где вы хотите поставить иконку, вставляем код:

<i class="icon название иконки"></i>

4. Вы можете пользоваться моей демо, там есть все представленные иконки и с помощью google chrome просмотрщика элемента определить название иконки и вставить вместо "название иконки". Допустим, иконка с изображением часов имеет такой код: