Як вирівняти іконку по центру кнопки

Як вирівняти іконку по центру кнопки

Загальний розмір всієї картинки 48x48 пікселя, окремо кожної іконки - 24x24 відповідно. Кнопки квадратні, без тексту, з символом у центрі - все дуже просто.
Складність полягає в тому, що якщо додати зображення безпосередньо до елементу кнопки як фон, через CSS, при цьому вказати позицію потрібної картинки, вирівняти по центру, заборонити повторення, то навколо, з тієї чи іншої сторони, в залежності від положення обраної іконки, залишаться видно частини інших зображень спрайту.

#myButton height: 48px;
width: 48px;
background-color: darkorange;
background-image: url ( '../ img / my-icons.png');
background-repeat: no-repeat;
background-position: 12px 12px;
>

Щоб вирішити цю проблему засобами CSS, без додаткових HTML-тегів для блоку кнопки, потрібно додати псевдоелемент :: before. для якого задати розміри висоти і ширини відповідають розмірам зображення з потрібною іконкою, в даному випадки - 24px на 24px.

#myButton height: 48px;
width: 48px;
background-color: darkorange;
box-sizing: border-box;
padding-top: 12px;
>
#myButton :: before display: block;
content: '';
background-image: url ( '../ img / my-icon-min.png');
background-position: 0 0;
background-color: transparent;
background-repeat: no-repeat;
height: 24px;
width: 24px;
margin: 0 auto;
>

Ось таке просте рішення. Сподіваюся буде корисним.

P.S. Чесно кажучи, шкода використовувати для цієї справи цілий псевдо-елемент, адже його можна більш конструктивно застосувати, та й завжди є підключити шрифтові іконки. але заради чотирьох простих кнопочок, мені досить і того що є.