更新

Question

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

我的问题是图标略高于文字，不管我尝试的是什么都不想居中。

StackOverflow上的几个答案建议使用vertical-align属性[1] [2]，但图标似乎完全忽略了这一点。我想这是因为这两个问题都是在2013年提出的，而且自那以后字体真棒已经更新。

我尝试使用flexboxes，但最终同时移动了文本和图标。我也尝试将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

正如您所看到的，图标仍然在文本上方提升，我不知道如何垂直对齐。

Answer 1

图标上的libresolv.so正在抛弃垂直对齐方式。如果你想让图标左边对齐，文本居中，你可以使用flexbox和这样定义的宽度......

float-left

如果您希望两个图标和文本居中，那就更简单了。只需删除浮动并将<a class="btn btn-lg btn-primary btn-block d-flex align-items-center px-0" role="button"> Music </a>添加到btn ...

align-middle

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

Answer 2

更新

用5.0.13
删除了个（<a>的所有内容现在都是伪元素）
已移除（不需要额外加成，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图标？

2 个答案:

更新

JSFiddle

演示