我正在使用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"><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>
Since you are using the
v4.*.*
offontawesome
the prefixclass
of invoking your desired icon isfa
notfab
(fab
is a style for brands in version5.*.*
and alsofas
is a solid style in the same version), so you need to make a change in your script just like this:The problem is with the CDN you have. Request a Kit by creating an account on fontawesome. They will give you something like this:
<script src="https://kit.fontawesome.com/fc188b5fd5.js" crossorigin="anonymous"></script>
For displaying the envelope you need to change from
<i class="fab fa-envelope"></i>
to<i class="fa fa-envelope"></i>
.