在 Bootstrap 4 中使用 Font Awesome

Question

我在使用 Bootstrap 4 开发并尝试创建一个 Font Awesome 按钮时发现的一个主要问题，当我创建一系列按钮时，我得到不同大小的按钮，获得相同大小按钮的唯一方法是为每个按钮使用相同的字体一所以问题是由于 Font Awesome 大小对于每个字体都不相同。

       <a class="btn btn-outline-warning" type="button" href="#">
        <i class="fa fa-edit"></i>
      </a>

      <a class="btn btn-outline-danger" type="button" href="#">
        <i class="fa fa-trash"></i>
      </a>

有没有一个实际的例子来解决这个问题？

原文由 Med Karim Garali 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

虽然您当然可以手动调整 Font Awesome 图标的字体大小，但我建议采用一种不太引人注目的方法： .fa-fw 。这是一个实用类，它是 Font Awesome 样式表的一部分，有助于统一字体的宽度。根据 4.7.0 文档：

使用 fa-fw 将图标设置为固定宽度。当不同的图标宽度无法对齐时非常适合使用。在导航列表和列表组等方面特别有用。

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<a class="btn btn-outline-warning" href="#">
  <i class="fa fa-fw fa-edit"></i>
</a>

<br>

<a class="btn btn-outline-danger" href="#">
  <i class="fa fa-fw fa-trash"></i>
</a>

<br>

<a class="btn btn-outline-success" href="#">
  <i class="fa fa-fw fa-wrench"></i>
</a>

<br>

<a class="btn btn-outline-info" href="#">
  <i class="fa fa-fw fa-stop"></i>
</a>

在上面的示例中，您可以看到 .fa-fw 如何调整您的图标间距，一切看起来都一样。您可能会注意到，尽管我确实也从您的锚标记中删除了 type="button" ，因为这导致 Bootstrap 没有应用您声明的 ban-outline-* 的完整 CSS。

原文由 Robert 发布，翻译遵循 CC BY-SA 3.0 许可协议