Блог

Я пытаюсь найти правильный способ написания текста рядом со значком Font Awesome. Я хотел бы, чтобы текст выстраивался рядом со значком, а когда текст удлиняется (или ширина отображения сокращается), я хотел бы переносить рядом со значком несколько строк текста, а не под значком.

 <div class="row">
  <div class="col-lg-9 col-md-8 col-sm-12 col-xs-12">
    <h1 id="title">Title
    </h1>
    <table id="iiij" align="left" border="0" cellpadding="1" cellspacing="1">
      <tbody>
        <tr class="row">
          <td class="cell">
          </td>
        </tr>
      </tbody>
    </table>
    <div id="header">
      <h4>Header
      </h4>
      <br/>
      <div id="box.img">
        <i class="fas fa-home">
        </i>
        <p id="content"> This icon is a picture of a house. I want the text to wrap square so is does not load below the icon. When the display is changed, for mobile users, it jumps below the icon.
        </p>
      </div>
    </div>
    <div class="form-container margin-top-40">
    </div>
  </div>
</div>

     <style>#iiij{
  width:100%;
  }
  .fas.fa-home{
    font-size:36px;
    align-self:start;
    float:left;
  }
  #box.img{
    font-size:10em;
    color:rgb(32, 61, 133);
    padding-left:10px;
    float:left;
    margin-top:16px;
    margin-left:20px;
    margin-right:20px;
    margin-bottom:16px;
    clear:left;
    display:inline-block;
  }
  #title{
    color:rgb(32, 61, 133);
    margin-top:21.44px;
    margin-left:20px;
    margin-right:20px;
    margin-bottom:21.44px;
  }
  #header{
    color:rgb(32, 61, 133);
    margin-top:21.28px;
    margin-left:20px;
    margin-right:20px;
    margin-bottom:21.28px;
  }
  #content{
    color:rgb(85, 85, 85);
    margin-top:16px;
    margin-left:20px;
    margin-right:20px;
    margin-bottom:16px;
    float:left;
    align-self:start;
    display:inline-block;
    clear:inherit;
  }
</style>
  

https://codepen.io/MSchleicher/pen/wONzPb

Я бы хотел, чтобы значок был выровнен по левой стороне страницы, а текст был рядом с ним, как если бы они были отдельными столбцами содержимого.

Подумайте о переключении #box.img на отображение в формате flex.

 #box.img {
  display: flex;
}
  

Это дает желаемый макет. Оттуда просто отрегулируйте отступы по мере необходимости.

Дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox