如何在Bootstrap 4中将Font-Awesome图标居中对齐与一行文本？

Question

我试图将“真棒字体”图标垂直居中对齐到一小段文字或一行文本。 这是我要实现的目标的图片： 这是我想要实现的外观

我正在处理的网页部分在此处显示： 这是我的代码当前产生的外观。 请注意未对齐的FA图标 ，尤其是下面的代码在右侧（第2列）：

<div class="col-12 col-md-6 col-lg-5">
  <h4 class="text-center ">Honors and Awards</h4>
  <i class="fa fa-trophy fa-lg" aria-hidden="true"></i>
  <h5 class="text-center"> Boy Scouts of America Eagle Scout Rank</h5>
  <h6 class="text-center"> The Highest Rank in Scouting</h6>
  <h6 class="text-center"> April 2014 </h6>
</div>

Answer 1

发生这种布局是因为所有元素都是块级元素的h。 为了使其对齐，您需要将其相对于左侧定位，将其插入标题之一。

我还要说，这完全是对多个标题元素的错误使用

我将使用常规列表-或DL并将图标作为：before元素应用到左侧。 使用dl-意味着yuo可以继续添加奖励（例如：新的dt和相关的dd）以及每个奖励更多或更少的描述性内容（例如：dd）。

我还向dt添加了类，以允许每种奖励类型显示不同的图标。 我在DD中添加了一个描述类，该类允许每个奖项内容的第二行和日期行的特定样式。

更新-根据OP的评论-有关在使用：before方法时希望旋转图标的信息。 我添加了两行CSS以实现此目的

  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;

这是@SatAj对这个问题的回答 ：

请注意，此动画不一定能在较旧的浏览器（例如IE8）上运行，但大多数现代浏览器都可以应付。 另外-并非所有的FA图标看起来都可以很好地旋转IMO。

 dl {margin-left: 40px} dt {font-size: 1.6em;position:relative;} dt:not(:first-of-type) {margin-top: 2em} dt:before { content: ""; font-family: FontAwesome; left: -40px; position:absolute; top: 5px; -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; } dt.achievement:before { content: "\\f091"; } dt.academic:before { content: "\\f19d"; } dd {margin-left: 0} dd.description {font-size: 1.3em;} 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/> <h2>Honors and Awards</h2> <div class="col-sm-12 col-md-6 col-lg-5"> <dl> <dt class="achievement">Boy Scouts of America Eagle Scout Rank</dt> <dd class="description">The Highest Rank in Scouting</dd> <dd>April 2014</dd> <dt class="academic" >Principles Academic Award</dt> <dd class="description">The greatest achievement in academia</dd> <dd>June 2017</dd> </dl> </div> 

Answer 2

使用Bootstrap 4出色的网格系统创建网格，将图标放在左侧的较小列中，将文本放在右侧将出现的另一列中。

  <div class="container">
    <div class="row">
      <div class="col-12 col-md-6 col-lg-5">
        <div class="row">
          <div class="col-2">
            <i class="fa fa-trophy fa-lg" aria-hidden="true"></i>
          </div>
          <div class="col-10">
            <h4 class="text-center ">Honors and Awards</h4>
            <h5 class="text-center"> Boy Scouts of America Eagle Scout Rank</h5>
            <h6 class="text-center"> The Highest Rank in Scouting</h6>
            <h6 class="text-center"> April 2014 </h6>
          </div>
        </div>
      </div>
    </div>
  </div>

这是一个实时示例： http : //jsbin.com/yejufib/edit?html

还有更好的方法可以实现此目的，并且由于您已经在使用Bootstrap，我建议您检查此组件： https : //getbootstrap.com/docs/4.0/layout/media-object/