Під час верстки макетів часто виникає необхідність розмістити поруч з текстом посилання невелику іконку. Будь-якому гарному верстальщику хочеться зробити таку іконку невід'ємною частиною посилання. Найпоширеніший метод вирішення цього завдання - помістити іконку на фон посилання і додати посиланням padding. На жаль, цей метод накладає обмеження на зображення, яке використовується в якості іконки. Якщо ми хочемо використовувати один спрайт для всіх іконок, то відступи між іконками залежать від розмірів посилань. При великій кількості іконок один спрайт може мати досить значні розміри, причому нерідко велика частина зображення порожня. Можна, звичайно, кожну іконку зберегти окремим файлом, але кожен такий файл збільшить час завантаження сторінки. В результаті ми змушені шукати баланс між розміром і кількістю використовуваних зображень. Завдання ускладнюється у міру додавання на сторінку нової графіки.
Я пропоную новий метод, що дозволяє оптимально використовувати файл спрайту, і при цьому ніяк не обмежує розміри посилань. В основі цього методу лежить використання псевдо-елемента: before. Підтримка цього псевдо-елемента є у всіх сучасних браузерах. IE7 сучасним браузером ми не вважаємо, в ньому іконки просто не з'являться. Отже, приступимо.
Для початку створимо спрайт з усіма потрібними нам іконками. Зовсім не важливо, в якому порядку вони розміщені. Як приклад для цієї статті я вибрав кілька іконок з популярного набору від Fat Cow Hosting:
Мій спрайт для демонстрації методу
Я рекомендую залишати між іконками 1-2 порожніх пікселя, в іншому випадку при збільшенні тексту засобами браузера краю сусідніх іконок потраплятимуть в видиму область.
Для початку створимо базовий клас .icon для всіх іконок:
Тепер відкриваємо сервіс SpriteCow. завантажуємо в нього наш спрайт, визначаємо координати всіх іконок і створюємо для кожної окремий клас з цими координатами. Сам сервіс пропонує не тільки координати, але і розміри і інші властивості, але нам все це не потрібно.
Щасливчики, які використовують less або sass, можуть включити загальний клас .icon в кожен з класів конкретних іконок, після чого посиланням досить буде додати тільки останній, наприклад class = "icon-youtube" замість class = "icon icon-youtube"
Для демонстрації використання цього класу створимо кнопочку відправки пошти:
Тепер в нашій кнопці ми можемо використовувати будь-яку з уже визначених іконок, додаючи їй класи icon-block і клас з координатами самої іконки. Сторінку з прикладами посилань з іконками можна подивитися тут.