Html Font Awesome 5 图标在 Bootstrap 4 上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48392395/
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
Font Awesome 5 Icons not working on Bootstrap 4
提问by henriquehbr
I was trying to add the github (class="fas fa-github") icon on a bootstrap dark button, but the button icon and text doesn't appear (the console shows nothing)
我试图class="fas fa-github"在引导程序暗按钮上添加 github ( ) 图标，但按钮图标和文本没有出现（控制台什么也没显示）
Code:
代码：
<div class="jumbotron">
<h1 class="display-4">Henrique Borges</h1>
<p class="lead">Programador experiente e Web Designer.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="fas fa-github btn btn-dark btn-lg" href="#" role="button">Github</a>
</p>
</div>
I′ve already included both the BS and FA libraries:
我已经包含了 BS 和 FA 库：
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/fontawesome-all.min.js"></script>
回答by Lakindu Gunasekara
Try the snippet. Changed the fas fa-githubto fab fa-github.
尝试片段。将 更改fas fa-github为fab fa-github。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
<div class="jumbotron">
<h1 class="display-4">Henrique Borges</h1>
<p class="lead">Programador experiente e Web Designer.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<i class="fab fa-github btn btn-dark btn-lg" href="#" role="button"> Github</i>
</p>
</div>回答by HashRocketSyntax
I have run into this problem before, particularly with the fasclass. For me it has always been manually upgrading my font awesome style sheet tag in my head.
我以前遇到过这个问题，特别是在fas课堂上。对我来说，它一直在我脑海中手动升级我的字体真棒样式表标签。
For whatever reason, dependency managers like yarn don't always have the very latest version of font awesome.
无论出于何种原因，像 yarn 这样的依赖管理器并不总是拥有最新版本的字体 awesome。
https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css
https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css
<!-- FontAwesome -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
回答by Danish Jamshed
.fasclass will only work with font-weight: 900. make sure you have font-weight: 900.
.fas类将仅适用于font-weight: 900. 确保你有font-weight: 900。
you are using multiple classes fas fa-github btn btn-dark btn-lgif any of these does not have font-weight: 900font will not show up.
您正在使用多个类，fas fa-github btn btn-dark btn-lg如果其中任何一个没有font-weight: 900字体，则不会显示。
try this
尝试这个
.btn {
font-weight: 900;
}
