Всем привет!
Никогда спрайтами в css не пользовался толком, сейчас создал спрайт вида:
.sprite {
background-image: url(../img/sprite/sprite.png);
background-repeat: no-repeat;
display: block;
}
.sprite-icon-delete {
width: 15px;
height: 16px;
background-position: -5px -5px;
}
.sprite-icon-embed {
width: 16px;
height: 7px;
background-position: -56px -5px;
}
Создаю кнопки:
<a href="#" class="button tiny green"><i class="sprite sprite-icon-embed"</i>EDIT</a>
<a href="#" class="button tiny green"><i class="sprite sprite-icon-delete"></i>DELETE</a>
Но никак не могу выровнять иконку и текст. Иконки имеют разную высоту. Что я пробовал:
1) Задавал классу .sprite свойства inline-block vertical-align: middle - иконка то выше, то ниже текста. Не подходит.
2) Задавал классу .sprite свойства inline-block, а самой кнопке одинаковые height и line-height. Для текста эта методика рабоает, а для иконки - нет.
Код:
codepen.io/anon/pen/GJdbEe
Как правильно выравнивать и правильно ли я вообще использую технику спрайтов? Например если применить к каждой кнопке класс sprite и позиционировать спрайтовую картинку через уникальный класс для каждой кнопки то вообще ерунда получается - соседние иконки из спрайта также внутри кнопки становятся (оно и понятно, т.к. в спрайте много картинок, отступ между картинками в 100-200 пикселей в спрайте не вариант).
Простой
Простой