.icon {
  display: inline-block;

  text-align: center;

  background: 50% no-repeat;
}

/* Hack for correct baseline positioning */
.icon:empty:after {
  visibility: hidden;

  content: '\00A0';
}

/*
 * Чтобы иконка правильно позиционировалась внутри блочного контекста,
 * нужно прописать родителю свойство line-height со значением, равным высоте иконки
 */
.icon .image {
  margin: -5.18em 0 -5em; /* 0.18 — magic number, empirically found */

  vertical-align: middle;
}