Улучшение значков в css

#css #sass #font-awesome

#css #sass #шрифт — потрясающий

Вопрос:

введите описание изображения здесь

Я изучаю css (scss), и у меня проблема со стилистикой моего текста. Как я могу получить текст в одну строку и как расположить значок по центру от fontawsome к тексту?

 main {
  overflow: hidden;
  opacity: 0.6;

  .icons {
    display: block;
    position: relative;
    font-size: 3rem;
    opacity: 1;

    .fire {
      color: red;
      display: flex;
      padding-top: 5%;
      padding-left: 3%;
      position: absolute;
      margin-top: 10%;

      p {
        padding-left: 5%;
        display: flex;
        color: blanchedalmond;
      }
    }
  }
}

  

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

1. Информации недостаточно. Можете ли вы также предоставить фрагмент HTML-кода?

2. попробуйте использовать white-space: nowrap , если у вас нет, для текста

3. Да, здесь есть полный html и css. codepen.io/elexsccn/pen/GRZbgQv Я попробовал no-wrap, но безрезультатно