Генератор CSS-спрайтов

Соберите несколько иконок в один PNG-спрайт и получите готовый для вставки CSS-код background-position, чтобы показывать каждую иконку на вашем сайте по отдельности.

Иконки не выбраны

Как это работает

CSS-спрайт объединяет несколько иконок в одном файле изображения, чтобы сократить число сетевых запросов сайта. Каждая загруженная иконка помещается в ячейку фиксированного размера на сетке, а инструмент автоматически создаёт для неё CSS-класс со свойством background-position, указывающим на её точное положение в сетке.

Как использовать сгенерированный CSS-код?

Скачайте PNG, положите его рядом с таблицей стилей под именем sprite.png (или измените URL в CSS), скопируйте сгенерированный CSS-код в свой файл, а затем примените соответствующий класс (например, class="icon icon-mon-icone") к HTML-элементу, например span.

Откуда берутся имена CSS-классов?

Имя каждого класса автоматически образуется из имени файла иконки (приводится к нижнему регистру, пробелы и специальные символы заменяются дефисами). При совпадении имён добавляется номер, чтобы имена оставались уникальными.

Создание спрайта и CSS выполняется целиком в вашем браузере: ваши иконки никогда не отправляются на сервер.