@raulvodov
UI/UX Designer

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

Имеется блок услуги (прикрепляю скрин). SVG иконки для него я превратил в шрифт на сайте https://icomoon.io/
Далее при помощи позиционирования сделал отступы иконок от заголовков (ниже код).
Так вот как центрировать данные иконки? Я попробовал left: 50% сделать, но они почему-то не по центру встают.

5a10989668464952139607.png

Код иконок:
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?6bqhzx');
  src:  url('../fonts/icomoon.eot?6bqhzx#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?6bqhzx') format('truetype'),
    url('../fonts/icomoon.woff?6bqhzx') format('woff'),
    url('../fonts/icomoon.svg?6bqhzx#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-chart5:before {
  content: "\e900";
  position: absolute;
  top: -48px;
  left: 50%;
  font-size: 32px;
  text-align: center;
}
.icon-chart6:before {
  content: "\e901";
  position: absolute;
  top: -48px;
  font-size: 32px;
}
.icon-coffee-cup1:before {
  content: "\e902";
  position: absolute;
  top: -48px;
  font-size: 32px;
}
  • Вопрос задан
  • 575 просмотров
Решения вопроса 1
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
left: 50%;
transform: translateX(-50%);
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы