如何在Bootstrap 4中将Font-Awesome图标的中心与一行文本垂直对齐? [英] How to vertically align center a Font-Awesome icon with a line of text in Bootstrap 4?

问题描述

我正在尝试将真棒字体"图标垂直居中对齐到一小段文字或一行文字.这是我要实现的目标的图片:这是我想要实现的外观

I am trying to align a Font Awesome icon vertically center to a small block or line of text. Here's a picture of what I'm trying to achieve: This is the look I'd like to achieve

正在查看我正在处理的部分网页:这是我的代码的外观目前生产.请注意未对齐的FA图标，尤其是下面的代码在右侧(第2列):

The part of my webpage I am working on is seen here:This is the look my code currently produces. Note the unaligned FA icon , specifically, the code below is for the right side (column 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>

推荐答案

之所以会出现这种布局，是因为所有元素都是块级元素中的h.为了使它如您所愿地对齐-您需要将它相对地定位在左侧，将其插入到一个标题中.

This layout is occurring because all of the elements are h's which are block level elements. In order to get it aligned as you wish - you need to either position it relatevely to the left, insert it into one the headings.

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

I wuld also say that this is entirely the wrong use of multiple heading elements

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

I would use a regular list - or a DL and apply the icon as a :before element to the left. Using a dl -means that yuo can just keep adding awards (ie: a new dt and associated dd's) as well as more / less descriptive content (ie: dd's) per award.

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

I also added classes to the dt's to allow different icons to be shown for each type of award. And I added a description class to the DD's which allows specific styling of the second line versus date line of content per award.

更新-根据OP的注释-有关在使用:before方法时希望旋转图标的问题.我添加了两行CSS来实现

UPDATE - as per OP's comments - regarding wanting spinning icons when using the :before approach. I have added two lines of CSS to achive this

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

这来自​​ @SatAj的答案对此问题:

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

Note that this animation will not necessarily work on older browsers suc as IE8, but most modern browsers should cope. Also - not all FA icons look good spinning 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>

这篇关于如何在Bootstrap 4中将Font-Awesome图标的中心与一行文本垂直对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！