Как выровнять иконку по центру кнопки

Взрыв по центру вселеннойИспользуя спрайт-изображения с иконками для кнопок сайта, я столкнулся с очень не приятной, но как оказалось, легко решаемой проблемой. Дело в том, что создавая свою мульти-картинку, я старался максимально уменьшить ее размер и вес, поэтому оставил только фактические изображения, удалив все отступы и пустое место вокруг иконок. В плоском дизайне, где можно обойтись без сложных многоцветных текстур, а простой одноцветный фон или градиент легко добавить с помощью CSS - самое то. В итоге получил вот такой набор иконок для кнопок вверх-вниз, меню и содержание:

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

Пример:

<div id='myButton'></div>
#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. Честно говоря, жалко использовать для этого дела целый псевдо-элемент, ведь его можно более конструктивно применить, да и всегда доступно подключить шрифтовые иконки, но ради четырех простых кнопочек, мне достаточно и того что есть.

©http://magentawave.com

Комментариев нет:

Отправить комментарий

Следующее Предыдущее

BestProject