Font Awesome 图标没有显示在我使用 Bootstrap4 制作的网页上

Question

我正在使用 Bootstrap4(CDN) 制作一个网页，我打算使用 FontAwesome 图标 作为我的社交媒体链接。但是，在打开页面时，我看到一些 蓝色框 而不是图标，并且 它们可以正常工作 。我只需要显示图标。任何帮助将不胜感激。

以下是必要的片段： 1.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

2.

<ul class="social-icons"> <li><a href="https://www.facebook.com/avirup.dey.921" target="_blank"></a></li> <li><a href="https://www.quora.com/Avirup-Dey-5" target="_blank"></a></li> <li><a href="https://www.github.com/AvirupJU" target="_blank"></a></li> <li><a href="mailto: avirupdeyju@outlook.com" target="_blank"></a></li> </ul>

Here is what I see...

Answer 1

由于您使用的是 v4.*.* 超棒的字体 ，调用所需图标的前缀 class 是 fa 而不是 fab.

fab and fas are for the brand and solid styles in v5.*.* and also, fa is deprecated in this version. You can read more about it here.

因此您需要像这样更改脚本：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<ul class="social-icons">
  <li><a href="https://www.facebook.com/avirup.dey.921" target="_blank"><i class="fa fa-facebook"></i></a></li>
  <li><a href="https://www.quora.com/Avirup-Dey-5" target="_blank"><i class="fa fa-quora"></i></a></li>
  <li><a href="https://www.github.com/AvirupJU" target="_blank"><i class="fa fa-github"></i></a></li>
  <li><a href="mailto: avirupdeyju@outlook.com" target="_blank"><i class="fa fa-envelope"></i></a></li>
</ul>

注意： 您可以从 here.

升级当前版本

Answer 2

问题出在您的 CDN 上。通过在 fontawesome 网站上创建帐户来请求套件。他们会给你这样的东西：<script src="https://kit.fontawesome.com/fc188b5fd5.js" crossorigin="anonymous"></script> 或者你可以简单地使用它。

要显示信封，您需要将  更改为 。

Answer 3

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

<ul class="social-icons">
  <li><a href="https://www.facebook.com/avirup.dey.921" target="_blank"><i class="fab fa-facebook"></i></a></li>
  <li><a href="https://www.quora.com/Avirup-Dey-5" target="_blank"><i class="fab fa-quora"></i></a></li>
  <li><a href="https://www.github.com/AvirupJU" target="_blank"><i class="fab fa-github"></i></a></li>
  <li><a href="mailto: avirupdeyju@outlook.com" target="_blank"><i class="fa fa-envelope"></i></a></li>
</ul>

Font Awesome 图标没有显示在我使用 Bootstrap4 制作的网页上

Font Awesome Icons Not Showing Up on my webpage I made using Bootstrap4

html

font-awesome

bootstrap-4