Іконки, укладені в спрайт
Добру річ я відкопав. Інтерфейсні іконки укладені в один спрайт. Якщо хтось не знає, що таке спрайт - це одна картинка, в якій є кілька зображень, що відображаються на сайті окремо за допомогою css. Не знаю, чи я пояснив, але ви на прикладі цієї збірки можете дізнатися, що таке спрайт.
Переваги спрайтів
Давно я не викладав іконки, напевно тому, що всі іконки, які були мені потрібні, вже були на моєму сайті :)) але ось знадобилися іконки в одному спрайте і я знайшов ці і ділюся ними з Вами. До речі відмінна риса і найсуттєвіший плюс спрайту, це те, що якщо завантажилася картинка спрайт один раз, то всі елементи цього спрайту більше не підвантажуватимуться і відповідно зменшуватимуть швидкість html сторінки. Зазвичай спрайти використовують для кнопок, які змінюються під час наведення. Іноді буває таке, що кнопка у звичайному стані і кнопка при наведенні – це дві різні картинки і ви могли помітити на будь-яких сайтах, коли наводиш на кнопку, зображення з'являється не відразу – воно підвантажується. Зі спрайтом такої проблеми не буде. Ще один плюс спрайтів – економія місця. Скажімо у вас є якийсь плагін, типу слайдера, і до нього йдуть кілька десятків зображень (куточки рамок, самі рамки, стрілки, буліти, ікони соціальних мереж і так далі). Так ось, коли всі вони укладені в одну картинку, це набагато зручніше і акуратніше виглядає, якби вони валялися в папці із зображеннями окремо.
Що зображено на цих іконках
Ці іконки підключаються дуже просто:
1. Підключаємо css файл sprite.css таким чином: створюємо папку css у корені вашого сайту, закидаємо туди цей файл css, а на сторінці, де відображатимуться іконкиміж тегами вставляємо наступний код:
2. Далі створюємо папку img в корені вашого сайту та кидаємо туди зображення sprit.png
3. У місці, де ви хочете поставити іконку, вставляємо код:
Ну я думаю, що розібратися, як вставляти ці ікони зі спрайту не складно, тим більше я вже все пояснив :)) Приємного користування!