在 Bootstrap 4 中使用 Font Awesome答案

【问题标题】：Using Font Awesome with Bootstrap 4在 Bootstrap 4 中使用 Font Awesome
【发布时间】：2018-10-11 15:07:57
【问题描述】：

我在使用 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>

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

【问题讨论】：

@Craig：我认为我的问题不应该被负面评价，因为这是一个很多人都会遇到的真正问题。
另一位用户投了反对票。我只添加了一个额外的标签“css”，以帮助更多人了解您的问题。以下资源将帮助您改善您的问题并帮助减少您的反对票...meta.stackexchange.com/help/how-to-ask

标签： css twitter-bootstrap bootstrap-4 font-awesome

【解决方案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。

【讨论】：

【解决方案2】：

正如他们的名字所暗示的，他们的图标只不过是“美化”的字体。因此，您可以使用内联 CSS 修改它们的大小；或者更好的是，通过外部 CSS 样式表。

你可以通过输入修改fa类：

.fa{
    font-size: 15px !important;
}

只需将15px 更改为合适的即可。除了使用px，您还可以使用em。此外，请确保包含 !important 以覆盖 Bootstrap 的 CSS 样式表条目。

你也可以通过输入具体的类来修改具体的图标/字体，如下：

fa fa-edit{
    font-size: 15px !important;
}

如果您是自己主题的作者，我相信您知道样式表是如何工作的以及优先级等。如果没有，那么您应该首先创建一个Child Theme，然后只修改子主题。如果您修改了父主题，那么当主题作者发布更新时，您的修改将被覆盖。

【讨论】：

【解决方案3】：

你可以去尺码：

https://fontawesome.com/icons?from=io

然后选择图标并阅读使用图标

【讨论】：