Question

我试图在bootstrap dark按钮上添加github（class="fas fa-github"）图标，但是没有出现按钮图标和文本（控制台没有显示任何内容）

代码：

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

我已经包括了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>

Answer 1

尝试使用代码段。已将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>

Answer 2

我以前遇到过这个问题，尤其是fas类。对我来说，一直以来我一直在手动升级我的字体真棒样式表标签。

无论出于何种原因，诸如yarn的依赖项管理器并不总是具有最新版本的真棒字体。

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

Answer 3

.fas类仅适用于font-weight: 900。确保您有font-weight: 900。

您正在使用多个fas fa-github btn btn-dark btn-lg类，如果其中任何一个没有font-weight: 900字体都不会显示。

尝试

.btn {
    font-weight: 900;
}

Font Awesome 5图标无法在Bootstrap 4上运行

3 个答案: