Получение иконки css

https://www.vk.com//images/icons/doc_icons.png - здесь есть иконки, нужно например использовать третью иконку. С последней разобрался { height: 60px; width: 60px; }, а если пробую 120 x 120, то получается три иконик.


Ответы (1 шт):

Автор решения: Nikolay Sulimov

Суть проблемы немного не понятна, если тебе требуется взять какую то конкретную иконку, то вот пример стиля

.icon{
  width: 30px;
  height: 30px;
  background: url(https://www.vk.com//images/icons/doc_icons.png);
  background-repeat: no-repeat;
}

.icon-doc{background-position-y: 0px}
.icon-zip{background-position-y: -30px}
.icon-img{background-position-y: -60px}
.icon-audio{background-position-y: -90px}
.icon-video{background-position-y: -120px}
.icon-book{background-position-y: -150px}
.icon-file{background-position-y: -180px}

И пример использования в HTML

<div class="icon icon-doc"></div>
<div class="icon icon-zip"></div>
<div class="icon icon-img"></div>
<div class="icon icon-audio"></div>
<div class="icon icon-video"></div>
<div class="icon icon-book"></div>
<div class="icon icon-file"></div>

Пример работы можно посмотреть

Если тебе нужно ещё увеличивать в размере, то тут легче подготовить отдельную картинку или всять изображение в SVG

→ Ссылка