Как правильно сверстать этот блок?

[hetsketch]

В общем, есть такой блок(см. прикрепленные файлы). Так же есть спрайт с иконками для каждого пункта. Я написал такой код для каждого айтема. И у меня возник такой вопрос: как лучше разместить иконки в айтеме? Читал, что нужно делать в CSS через background, но тогда придется дублировать код и нужно будет давать уникальные имена айтемам. Или же всё таки в этом случае использовать тэг img? Хотелось бы услышать мнение бывалого специалиста)

 p.s. для разметки использовалась сетка bootstrap

<div class="row">
  <div class="services">
    <div class="col-md-4">
      <div class="service-item">
        <h3>Photography</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, itaque.</p>
      </div>
    </div>
    ...
  </div>
</div>

 

Edited November 21, 2016 by hetsketch

[andrey7287]

Я для подобных задач использую compass, в коде это выглядит довольно лаконично.

/* это общии стили для позиционирования всех картинок */
&::before {
  content: "";
  width: 45px;
  height: 45px;
  position: absolute;
  top: 5px;
  left: 5px;
}

/* а это для позиционирования каждой отдельной картинки */ 
@each $i in photo, html, css {
  &--#{$i}::before {
  background: sprite($site-sprite, service_#{$i});
  }
}

Тут фишка в том что нужно добавить класс каждому элементу, и соответствующее название для картинки. В данном случае у первого элемента будет название service-item--photo, а у картинкам service_ photo.png .

ЗЫ Не всем понравится подобное решение, но оно довольно гибкое, картинки в проекте можно менять вообще не трогая код.

Можно обойтись и без дополнительных классов, только имена картинок будут pictname_1.png, pictname_2.png и т.д.

$i: 6;
@while $i > 0 {
  &:nth-child(#{$i}) { 
	background: sprite($site-sprite, pictname_#{$i});
  }
  $i: $i - 1;
}

Без компаса , с уже готовым спрайтом придётся свой миксин использовать . Раньше я так и делал. Кода в этом случае будет ещё меньше. 

[hetsketch]

@andrey7287, да уж... Это пока сложно для моего понимания) Как я понял код написан на SCSS, сейчас пытаюсь в нем разобраться. Попробую сделать без компаса пока, правда не очень хорошо понимаю, как это всё реализовать. Ну а вообще подход делать через background правильный? Или это не так принципиально?

[alejandro13]

На самом деле определить, что использовать - img или background - можно, задав себе вопрос, чем является эта картинка. Если это часть контента - то img, если она нужна для визуального оформления - то background. 

[hetsketch]

Короче проблему решил так: создал свой миксин, который из спрайта вытягивает иконку по номеру. И в цикле каждому nth-child(i) задавал i-ю иконку с помощью миксина.

@mixin add-icon($sprite-url, $image-width, $n, $offset-x: 0)
  background-image: url($sprite-url)
  @if $n == 1
    background-position: 0 0
  @else
    background-position: ($n - 1)*($image-width+$offset-x)*(-1) 0px

@for $i from 1 through 6
    & :nth-child(#{$i})
      .service-item
       &:before
         @include add-icon("../img/icons.png", 32px, $i, 10px)

Всем спасибо за ответы