css - Font Awesome 图标下方的居中文本

Question

你好，我正在使用 Font-awesome 和 bootstrap 4。请先检查我的脚本

<div class="container">
      <div class="row">

          <div class="col">
            <div class="row"> 
              <span class="fa fa-building fa-5x text-center"> </span>
            </div>
            <div class="row">
              <h3 class="text-center">Company Profile</h3>
            </div>
            </div>

          <div class="col">   
            <div class="row"> 
              <span class="fa fa-shopping-cart fa-5x text-center"> </span>
            </div>
            <div class="row">
              <h3 class="text-center">Shopping Cart</h3>
            </div>
           </div>

         <div class="col">   
            <div class="row"> 
              <span class="fa fa-industry fa-5x text-center"> </span>
            </div>
            <div class="row">
              <h3 class="text-center">Inventory Control</h3>
            </div>
           </div>


        <div class="col">   
            <div class="row"> 
              <span class="fa fa-users fa-5x text-center"> </span>
            </div>
            <div class="row">
              <h3 class="text-center">User Management</h3>
            </div>
        </div>
      </div>
  </div>

通过上面的脚本我得到了这个

如您所见，fa 图标不在文本的中心。如何让 fa-icon 居中？

Answer 1

将 text-center 类添加到图标周围的 div 而不是像这样的图标范围:

<div class="row text-center"> 
  <span class="fa fa-users fa-5x"> </span>
</div>