【问题标题】：How to vertically align font-awesome icons in a button?如何在按钮中垂直对齐字体真棒图标？
【发布时间】：2018-11-25 05:20:15
【问题描述】：

我的目标是创建一个带有相关图标的块按钮。由于 Bootstrap 4 本身不再支持 glyphicon 并且我更喜欢使用字体或 SVG 图像而不是 PNG 图像，因此我选择使用 font-awesome v5。

我的问题是图标略高于文本，并且无论我尝试什么都不想居中。

StackOverflow 上的几个答案建议使用vertical-align 属性[1][2]，但这似乎完全被图标忽略了。我想这是因为这两个问题都是在 2013 年提出的，并且从那时起 font-awesome 已经更新。

我尝试使用 flexbox 进行混乱，但这最终导致文本和图标都移动了。我还尝试将align-middle 类应用于跨度，但它也不起作用。

到目前为止，这是我的代码：

<div class="container">
  <p>
    <a class="btn btn-lg btn-primary btn-block" role="button">
      <span class="fas fa-music fa-lg float-left my-icon"></span> 
      <span class="my-text">Music</span>
    </a>
  </p>
</div>

JSFiddle Link

如您所见，图标仍然在文本上方，我不知道如何垂直对齐。

【问题讨论】：

标签： bootstrap-4 font-awesome vertical-alignment

【解决方案1】：

更新

将 Font Awesome 4.7 样式表替换为 5.0.13
删除了两个<span>s（<a> 的所有内容现在都是伪元素）
删除了<p>（不需要额外的标记，a.btn-block 已经是display:block）
使用了伪元素::after（文本）和::before（图标）

JSFiddle

演示

.icon {
  position: relative;
}

.icon::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #fff;
  position: absolute;
  left: 0.5em;
  font-size: 1.2em
}

.icon::after {
  color: #fff;
}


/* Music */

.music::after {
  content: 'Music';
}

.music::before {
  content: '\f001';
}


/* No-Microphone */

.no-mic::after {
  content: 'Mute Mic';
}

.no-mic::before {
  content: '\f539';
}


/* Play */

.play::after {
  content: 'Play';
}

.play::before {
  content: '\f04b';
}

<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css' rel='stylesheet'>
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">


<div class="container">
  <a class="btn btn-lg btn-primary btn-block icon music" role="button"></a>

  <a class="btn btn-lg btn-danger btn-block icon no-mic" role="button"></a>

  <a class="btn btn-lg btn-success btn-block icon play" role="button"></a>
</div>

<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js'></script>

【讨论】：

但是我使用的是 Font Awesome v5，所以我不明白为什么我不应该使用 fas
你的小提琴使用的是 4.7
我尝试使用 5.0.13，似乎唯一真正影响 FA 的属性是 line-height
确实你是对的。更新了适合 v5.0.13 的答案。 FA4 到 FA5 完全不同，所以忽略以前的答案。

【解决方案2】：

图标上的float-left 取消了垂直对齐。如果您希望图标左对齐，文本居中，您可以使用 flexbox 并定义宽度，如下所示...

<a class="btn btn-lg btn-primary btn-block d-flex align-items-center px-0" role="button">
      <span class="w-25 fas fa-music fa-lg my-icon"></span> 
      <span class="w-50 my-text">Music</span>
      <span class="w-25"></span>
</a>

如果您希望图标和文本居中，则要简单得多。只需删除浮动并将align-middle 添加到 btn...

<a class="btn btn-lg btn-primary btn-block align-middle" role="button">
  <span class="fas fa-music fa-lg my-icon"></span> 
  <span class="my-text">Music</span>
</a>

演示：https://www.codeply.com/go/iJV8uQDVVD

【讨论】：