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

Posted 2023-03-06

【中文标题】如何在 Bootstrap 4 中将 Font-Awesome 图标与一行文本垂直对齐？

【英文标题】：How to vertically align center a Font-Awesome icon with a line of text in Bootstrap 4?

【发布时间】：2018-06-28 06:03:49

【问题描述】：

我正在尝试将 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>

【参考方案1】：

出现这种布局是因为所有元素都是块级元素的 h。为了让它按照您的意愿对齐 - 您需要将其相对于左侧定位，将其插入标题中。

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

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

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

更新 - 根据 OP 的 cmets - 关于在使用 :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>

【讨论】：

您能否提供一个代码示例，就像您编写的那样？

嗨@@gavgrif——因为你使用了“内容：”\f19d“；” FA 图标本身的 unicode 参考，您将如何使用 FA 的动画类，例如“.fa-spinner”：fontawesome.io/examples？

@JosephRomo - 我刚刚更新了我的答案，加入了一个小 CSS 动画，允许按要求旋转图标。请阅读我的答案的更新部分。

【参考方案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/