Код:
<ul>
<li class="clearfix"><i class="sprite sprite-ico1"></i><span>Быстрый</span></li>
<li class="clearfix"><i class="sprite sprite-ico2"></i><span>Огромное количество задач</span></li>
<li class="clearfix"><i class="sprite sprite-ico3"></i><span>Оптимизированный</span></li>
<li class="clearfix"><i class="sprite sprite-ico4"></i><span>Множество возможностей</span></li>
<li class="clearfix"><i class="sprite sprite-ico5"></i><span>Автоматические обновления</span></li>
</ul>
-
.sprite {
background-image: url(upload/sprite.png);
background-repeat: no-repeat;
display: block; // если Inline или inline-block, то пропадают изображения
margin-bottom:15px; // не влияет на выравнивание
}
.sprite-easy {
width: 34px;
height: 32px;
background-position: -5px -5px
}
.sprite-ico1,
.sprite-ico2,
.sprite-ico3,
.sprite-ico4,
.sprite-ico5 {
width: 32px;
height: 32px
}
.sprite-ico1 {
background-position: -49px -5px
}
.sprite-ico2 {
background-position: -91px -5px
}
.sprite-ico3 {
background-position: -133px -5px
}
.sprite-ico4 {
background-position: -175px -5px
}
.sprite-ico5 {
background-position: -217px -5px
}
.sprite-pin {
width: 36px;
height: 32px;
background-position: -259px -5px
}
.sprite-saturn {
width: 32px;
height: 32px;
background-position: -305px -5px
}
.sprite-settings {
width: 33px;
height: 32px;
background-position: -347px -5px
}
Итог:
Однако, к примеру, заяц и "Быстрый" должны быть в одной строке. Как?