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

Question

我正在尝试将 Font Awesome 图标垂直居中对齐到一小块或一行文本。这是我要实现的目标的图片：This is the look I'd like to achieve

我正在处理的网页部分见此处：This is the look my code currently produces. Note the unaligned FA icon，具体来说，下面的代码适用于右侧（第 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 -意味着你可以继续添加奖励（即：新的 dt 和关联的 dd）以及每个奖励更多/更少的描述性内容（即：dd）。

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

更新 - 根据 OP 的评论 - 关于使用 :before 方法时想要旋转图标。我添加了两行 CSS 来实现这个

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

这是从 @SatAj 's answer 到这个问题：

请注意，此动画不一定适用于 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/

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

How to vertically align center a Font-Awesome icon with a line of text in Bootstrap 4?

html

css

twitter-bootstrap

font-awesome

twitter-bootstrap-4