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

Question

[De Slow]

Есть данный блок Sidebar
располагается соответственно в col-md-4>sidebar
таких будет 4 штуки, соответственно дублируются.
проблема для меня, в том, что квадратики в png
правильная ли структура html?

<div class="col-md-4">
             <div class="sidebar">
               <div class="side_1">
                 <div class="top_side"><img src="_include/img/icon_top_side.png"><h2>Топ квадратов</h2></div>
                 <ul>
                  <li><a class="" href="#"><img src="_include/img/icon_side.png">Топ1</a></li>
                 <li><a class="" href="#"><img src="_include/img/icon_side.png">Топ2</a></li>
                 </ul>
               </div>
</div>
</div>
</div>

Comments

[FeST1VaL]

А что будет если у вас будет много текста в одной строке?) Так что я думаю надо разделить на два блока

[De Slow]

Артем Будин, Это сайд бар, не будет много текста, название категорий

Answer 1

[Ankhena]

Ну и зачем вы собрались делать однотонные картинки с помощью img?

Это список, у него квадратики в ::before. Перед списком заголовок, у него тоже ::before, только синий.

https://jsfiddle.net/j0auve6m/
Отступы, размеры, цвета дорисуйте самостоятельно.

Answer 2

[Mambli Joe]

Можно убрать из HTML img с картинками маркеров и сделать так в CSS.

ul {
    list-style-image: url(images/red_square.png); 
   }

Comments

[De Slow]

а как быть с заголовком ("синяя картинка" Топ квадратов)

[Mambli Joe]

Я бы заголовок перенес тоже в ul, и отформатировал бы его как li с :first-child.

[De Slow]

Mambli-Joe, оу, но у него бг.... вот серый фон...
Как его тогда правильно сверстать? паддингами?