bootstrap-4 - 带有图标的 Bootstrap 4 实现按钮的 Fontawesome？

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 。但是您使用的是 <i class="fa fa-info-circle"></i>这是在v4.7 .有两种方法可以解决此问题。您可以添加v4.7 cdn 或只使用 fontawesomw v5.7像 <i class="fas fa-info-circle"></i> 这样的图标.你不见了s在 fa .

使用

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

或

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

更新

我也试过 <i class="fa fa-info-circle"></i>而不是使用实体图标并更改了CDN通过all fontawesome cdn links找到并且它工作得很好。无需通过添加 s 来更改 fontawesome 图标，您可以替换您的 CDN如下所示，它在 chrome 和 firefox 中工作

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