Question

我在使用Bootstrap 4开发并尝试创建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>

是否有一个实际的例子可以解决这个问题？

Answer 1

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

使用fa-fw以固定宽度设置图标。非常适合不同时使用图标宽度甩开对齐。特别适用于nav这样的东西列表＆amp;列表组。

<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。

Answer 2

顾名思义，他们的图标只不过是“荣耀”的字体。因此，您可以使用内联CSS修改其大小;或者更好的是，通过外部CSS样式表。

您可以输入以下内容修改fa课程：

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

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

您还可以通过输入特定的类来修改特定的图标/字体，如下所示：

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

如果您是自己的主题作者，我相信您知道样式表的工作方式以及优先级等。如果不是，那么您应首先创建Child Theme，然后仅修改子主题。如果修改父主题，则主题作者发布更新时将覆盖您的修改。

Answer 3

你可以去大小：

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

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

使用Font Awesome和Bootstrap 4

3 个答案: