[英]Font Awesome 5 Icons not working on Bootstrap 4
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)我试图在引导暗按钮上添加 github (
class="fas fa-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>
Try the snippet.尝试片段。 Changed the
fas fa-github
to 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>
I have run into this problem before, particularly with the fas
class.我以前遇到过这个问题,尤其是
fas
类。 For me it has always been manually upgrading my font awesome style sheet tag in my head.对我来说,它一直在我脑海中手动升级我的字体真棒样式表标签。
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">
.fas
class will only work with font-weight: 900
. .fas
类仅适用于font-weight: 900
。 make sure you have font-weight: 900
.确保你有
font-weight: 900
。
you are using multiple classes fas fa-github btn btn-dark btn-lg
if any of these does not have font-weight: 900
font will not show up.您正在使用多个类
fas fa-github btn btn-dark btn-lg
如果其中任何一个没有font-weight: 900
字体将不会显示。
try this试试这个
.btn {
font-weight: 900;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.