Question

我正在尝试在引导程序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图标，例如。您在s中丢失了fa。

使用

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

或

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

已更新

我也尝试使用而不是使用实心图标，并更改了all fontawesome cdn links所找到的CDN并使其正常工作。无需通过添加 s 来更改字体惊人的图标，您可以像下面那样替换CDN，并在chrome和firefox中将其唤醒

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

Answer 2

您需要将类fa替换为fas，并按如下所示更改到Font Awesome样式表的链接：

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

查看这两个更改后的代码段是否正常工作

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

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

2 个答案: