我使用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: avirupdeyju@outlook.com" target="_blank"><i class="fab fa-envelope"></i></a></li>
</ul>
推荐答案
由于您使用的是超棒的v4.*.*
,调用所需图标的前缀class
是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
andfas
are for the brand and solid styles inv5.*.*
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: avirupdeyju@outlook.com" target="_blank"><i class="fa fa-envelope"></i></a></li>
</ul>
注意::您可以从此处.
这篇关于我使用Bootstrap4制作的网页上没有显示字体真棒图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!