如何在按钮中垂直对齐超棒的字体图标？

Question

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

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

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

我尝试使用 flexboxes 进行 messign，但这最终导致文本和图标都移动了。我也尝试将 align-middle class 应用于跨度，但它也没有用。

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

<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

如您所见，图标仍然高于文本，我不知道如何垂直对齐它。

Answer 1

更新

用 5.0.13 替换了 Font Awesome 4.7 样式表
删除了两个 <span>（<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>

Answer 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

如何在按钮中垂直对齐超棒的字体图标？

How to vertically align font-awesome icons in a button?

vertical-alignment

font-awesome

bootstrap-4

更新

JSFiddle

演示