FA图标和文字环绕的HTML / CSS问题

Question

我试图找到在Font Awesome Icon旁边写文本的正确方法。我希望文本在图标旁边排成一行，当文本被加长（或显示宽度缩短）时，我想在多行文本中而不是图标下面的图标旁边。

<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

我希望图标对齐到页面的左侧，文本旁边的文本，就像它们是单独的内容列一样。

Answer 1

考虑切换#box.img以显示为flex。

#box.img {
  display: flex;
}

这给出了你想要的布局。从那里，只需根据需要调整填充。

更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox