Спрайт

Подскажите! На сайте в разных углах разбросаны  иконки, как их все обьединить в спрайт с помощью одного файла изображения?

В html разметке примерно так

<a href="http://ссылка.ру" class="Иконка1">Ютуб</a>

в css стилях

.Иконка1{

display:block;//если эта иконка ссылка к примеру(не блочный элемент)

text-indent:-9999px;//если эта иконка ссылка, скрываем текст

width:ширина_иконки1px;

height:высота_иконки1px;

background:url(images/ваш_спрайт.png);

background-position: 50px 50 px;// можно и процентами или обозначениями - top/left/right/bottom

}

собрать иконки в спрайт можно с помощью онлайн сервисов, либо в ручную в графическом редакторе

WeGeeks, спасибо но это не то, посмотрите на картинку, вопрос! какого размера делать спрайт? если страница 2000 на 2000 например и одна иконка в одном углу а другая в другом , файл изображения то один и как разорваться) я подумал может репитить картинки. Чтобы сервер то подгружал только одно изображение я имею ввиду.

Debager, ваш вопрос выдает полнейшее непонимание предмета. 

floppox,Почему?

Debager, потому что задать его может только человек, который абсолютно ничего не знает про позиционирование фона. Реально, стыдоба. 

floppox, Расскажите что вы имеете ввиду более предметно, а то вы на личности сразу переходите)

Цитата (WeGeeks):

либо в ручную в графическом редакторе

omg

открыть консоль
выполнить команду grunt sprite
все

vovka-morkovka, это не то, спасибо, я уже разобрался, вот ответ если кому будет интересно)
Цитата:

при вызове второго этого спрайта сервер заново его не подгружает, и можно указывать один и тот же спрайт в нескольких местах сайта не создавая один большой спрайт размером 2000 на 2000 пикселей)

Цитата (Debager):

vovka-morkovka, это не то

мое сообщение было ответом на совет собирать спрайты в редакторах

Откуда цитата, если не секрет? 

vovka-morkovka, вы думаете ТС в курсе, что такое - grunt? omg

посилання Попробуйте почитать вот это...

Цитата (WeGeeks):

вы думаете ТС в курсе, что такое - grunt?

Вредный совет на форуме - это вредный совет для всех, а не только для ТС. Не в курсе, так всегда сможет узнать.

Цитата (vovka-morkovka):

Вредный совет на форуме - это вредный совет для всех, а не только для ТС. Не в курсе, так всегда сможет узнать.

С чего он вредный? Если бы человек знал, что такое grunt, то не задал бы такой вопрос вообще никогда! Узнать сможет, а толку?

Цитата:

С чего он вредный?

Он вредный, потому что собирать спрайт в графическом редакторе - это за гранью. 
Цитата:

Если бы человек знал, что такое grunt

Повторяю: форум читает не только ТС. А технологии не зависят от чьего-то текущего уровня знаний.
Цитата:

Узнать сможет, а толку?

Он будет знать, что есть правильная альтернатива, а вникать в это или нет - это его дело. Все мы начинали с нуля. Ни в спрайтах, ни в сборщиках нет ничего сложного для человека, получившего аттестат зрелости.

Цитата (vovka-morkovka):

Он вредный, потому что собирать спрайт в графическом редакторе - это за гранью.

Далеко не за гранью... Я когда-то так делал давным давно, да многие так делали, поверьте и сейчас делают!
Цитата (vovka-morkovka):

Повторяю: форум читает не только ТС. А технологии не зависят от чьего-то текущего уровня знаний.

Читают все - спору нет, а вопрос задал ТС, "очень далекий" от front-end. Я дал ЕМУ решение ЕГО проблемы, наиболее для НЕГО подходящее.
Я мог бы посоветовать ему написать bash скрипт, в замену grunt и что? Это по вашему был бы дельный совет? Я вас умоляю...
Цитата (vovka-morkovka):

Он будет знать, что есть правильная альтернатива, а вникать в это или нет - это его дело. Все мы начинали с нуля. Ни в спрайтах, ни в сборщиках нет ничего сложного для человека, получившего аттестат зрелости.

Вам не сложно, вы специалист, мне тоже не сложно, но для кого-то это темный лес и вообще им это не нужно.

Сталкивалась со спрайтами при работе для мобильных приложений и игр,  прога сама генерит спрайт листы в нужном разрешении для каждого разрешения. Прогу и движок сейчас не вспомню, потому что это была не моя задача.
Hungry_Hunter, спс)