Fontawesome Bootstrap 4 带有图标的工具按钮？

Question

我正在尝试在 bootstrap 4 中实现 fornawesome。到目前为止，我能够获取所有文件，但屏幕上没有显示图标。有人可以告诉我我的代码有什么问题吗？

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/fontawesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-12 text-center">
      <a class="btn btn-outline-success" href="#" title="Help Documentation">
        <i class="fa fa-info-circle"></i>
      </a>
      <button type="button" name="btn-help" class="btn btn-link" title="Help Documentation">
    <i class="fa fa-info-circle"></i>
   </button>
    </div>
  </div>
</div>

Answer 1

问题是您使用的是 fontawesome v5.9。但是您正在使用 v4.7 中的 。有两种方法可以解决这个问题。您可以添加 v4.7 cdn 或仅使用 fontawesomw v5.7 图标，例如  。您在 fa 中缺少 s。

使用

<script src="https://kit.fontawesome.com/8b41a163ea.js"></script>

或

<i class="fas fa-info-circle"></i>

已更新

我也尝试使用  而不是使用实心图标，并更改了通过 all fontawesome cdn links 找到的 CDN 并且它工作得很好。无需通过添加 s 来更改 fontawesome 图标，您可以像下面那样替换 CDN 并在 chrome 和 firefox

中运行

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">

Answer 2

您需要将 class fa 替换为 fas 并将 link 更改为 Font Awesome 样式表，如下所示：

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">

查看您的代码段在这 2 次更改后的工作情况：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-12 text-center">
      <a class="btn btn-outline-success" href="#" title="Help Documentation">
        <i class="fas fa-info-circle"></i>
      </a>
      <button type="button" name="btn-help" class="btn btn-link" title="Help Documentation">
    <i class="fas fa-info-circle"></i>
   </button>
    </div>
  </div>
</div>

Fontawesome Bootstrap 4 带有图标的工具按钮？

Fontawesome with Bootstrap 4 implement button with an icon?

font-awesome

bootstrap-4