CSS 在 Bootstrap 4 中使用 Font Awesome
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50118837/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Font Awesome with Bootstrap 4
提问by Med Karim Garali
A Major problem I found while developing with Bootstrap 4 and trying to create a Font Awesome button that when I create a series of buttons, I get different size buttons, the only way to get the same size buttons is to use the same font for each one So the problem is due to Font Awesome sizes is not the same for every one.
我在使用 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>
Does one have a practical exemple to get Off this problem ?
有没有一个实际的例子来解决这个问题？
回答by Robert
While you can certainly manually adjust the font size of your Font Awesome icons, I would suggest a less dramatic approach: .fa-fw. This is a utility class that is part of Font Awesome's stylesheet that helps unify the width of your fonts. Per the 4.7.0 documentation:
虽然您当然可以手动调整 Font Awesome 图标的字体大小，但我建议采用一种不那么引人注目的方法：.fa-fw. 这是一个实用程序类，它是 Font Awesome 样式表的一部分，有助于统一字体的宽度。根据 4.7.0 文档：
Use
fa-fwto set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.
使用
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>In the above example you can see how .fa-fwhas adjusted your icon spacing and everything looks the same. You might notice though that I did also remove type="button"from your anchor tag as this was resulting in Bootstrap not applying the full CSS of the ban-outline-*you were declaring.
在上面的示例中，您可以看到如何.fa-fw调整图标间距，并且一切看起来都一样。您可能会注意到，我也确实type="button"从您的锚标记中删除了，因为这导致 Bootstrap 没有应用ban-outline-*您声明的完整 CSS 。
回答by Craig
As their name suggests, their icons are nothing more than 'glorified' Fonts. As such, you are able to modify their sizes using inline CSS; or better still, via an external CSS Stylesheet.
顾名思义，他们的图标只不过是“美化”的字体。因此，您可以使用内联 CSS 修改它们的大小；或者更好的是，通过外部 CSS 样式表。
You can modify the faclass by entering:
您可以fa通过输入以下内容来修改类：
.fa{
font-size: 15px !important;
}
Simply change the 15pxto whatever is appropriate. As well as using pxyou can also use em. Also, ensure you include !importantas to override Bootstrap's CSS Stylesheet entry.
只需将 更改15px为适当的即可。除了使用，px您还可以使用em. 此外，请确保您包含!importantas 以覆盖 Bootstrap 的 CSS 样式表条目。
You can also modify the specific icon/font by entering the specific class, as follows:
也可以通过输入特定的类来修改特定的图标/字体，如下：
fa fa-edit{
font-size: 15px !important;
}
If you are your own Theme's Author, I am sure you are aware of how Stylesheets work as well as priorities etc. If not, then you should first create a Child Themeand then modify the Child Theme only. If you modify the Parent theme, then your modifications will be overridden when the Theme Author releases an update.
如果您是自己主题的作者，我相信您知道样式表的工作方式以及优先级等。如果不是，那么您应该首先创建一个子主题，然后只修改子主题。如果您修改父主题，那么当主题作者发布更新时，您的修改将被覆盖。
回答by Ly Thanh Ngo
You can go to the size:
你可以去尺寸：
and choose icon and read usage icon
并选择图标并阅读使用情况图标
