带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.7CDN或只使用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通过所有fontawesome CDN链接找到的图标，并且效果很好。无需改变fontawesome图标加入S ^你可以取代你CDN像下面和沃金在Chrome和Firefox

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