我使用 Bootstrap4 制作的网页上没有显示字体真棒图标 [英] Font Awesome Icons Not Showing Up on my webpage I made using Bootstrap4

问题描述

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

I am making a webpage using Bootstrap4(CDN) and I intend to use FontAwesome icons for my social media links. However on opening the page I see some blue boxes instead of the icons and they are functional. I just need the icons to be displayed. Any help would be appreciated.

以下是必要的片段:1.

Here are the necessary snippets : 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"><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: [e-mail]" target="_blank"><i class="fab fa-envelope"></i></a></li>
                    </ul>

这是我看到的......

推荐答案

既然你使用的是 font-awesome 前缀 class 的 v4.*.*> 调用你想要的图标是 fa 不是 fab.

Since you are using the v4.*.* of font-awesome the prefix class of invoking your desired icon is fa not fab.

fab 和 fas 用于 v5.*.* 和 fa 中的品牌和纯色样式> 在此版本中已弃用.您可以在此处.

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.

所以你需要像这样改变你的脚本:

so you need to make a change in your script just like this:

<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: [e-mail]" target="_blank"><i class="fa fa-envelope"></i></a></li>
</ul>

注意:您可以从 此处.

这篇关于我使用 Bootstrap4 制作的网页上没有显示字体真棒图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！