Использование иконочного шрифта icomoon, font-awesome и размеры блоков

Question

Использую иконочный шрифт (ICOMOON). Проблема заключается в том, что при размещении иконки в блоке div, он не подстраивается под размер самой иконки и занимает лишнее место. Как я понял c font-awesome такая же ерудна. Мне кажется, что дело в line-height, но не до конца уверен. Каким образом можно пофиксить это? Использую дефолтные стили браузера

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <link rel="stylesheet" href="fonts/font-icons.css" type="text/css">
</head>
<body>
    <!--MY OWN SET - ICOMOON-->
    <div class="hello">
        <i class="_icon-chevron-solid hello__icon"></i>
    </div>

    <div class="hello2">
        <i class="_icon-chevron-solid hello__icon2"></i>
    </div>
</body>
</html>

CSS

.hello {
    background-color: red;
    margin-bottom: 20px;
    font-size: 40px;
    color: black;
}
.hello__icon {
    background-color: antiquewhite;
}
.hello2 {
    background-color: red;
    margin-bottom: 20px;
    color: black;
}
.hello__icon2 {
    background-color: antiquewhite;
    font-size: 40px;
}

CSS из ICOMOON

i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icons' !important;
  speak: never;
  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;
}

Answer 1

Нашел решение проблемы: задал для тега <i> display: block;

 i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  display: block;

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

БЛОГ НА HUSL

Использование иконочного шрифта icomoon, font-awesome и размеры блоков

Ответы (1 шт):