Font Awesome Icons Not Showing Up On My Webpage I Made Using Bootstrap4

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

Solution 1:

Since you are using the v4.*.* of font-awesome the prefix class of invoking your desired icon is fa not 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.

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

<linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"crossorigin="anonymous"><linkhref="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><ulclass="social-icons"><li><ahref="https://www.facebook.com/avirup.dey.921"target="_blank"><iclass="fa fa-facebook"></i></a></li><li><ahref="https://www.quora.com/Avirup-Dey-5"target="_blank"><iclass="fa fa-quora"></i></a></li><li><ahref="https://www.github.com/AvirupJU"target="_blank"><iclass="fa fa-github"></i></a></li><li><ahref="mailto: avirupdeyju@outlook.com"target="_blank"><iclass="fa fa-envelope"></i></a></li></ul>

NOTE: You can upgrade your current version from here.

Solution 2:

<linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"><ulclass="social-icons"><li><ahref="https://www.facebook.com/avirup.dey.921"target="_blank"><iclass="fab fa-facebook"></i></a></li><li><ahref="https://www.quora.com/Avirup-Dey-5"target="_blank"><iclass="fab fa-quora"></i></a></li><li><ahref="https://www.github.com/AvirupJU"target="_blank"><iclass="fab fa-github"></i></a></li><li><ahref="mailto: avirupdeyju@outlook.com"target="_blank"><iclass="fa fa-envelope"></i></a></li></ul>

Solution 3:

The problem is with the CDN you have. Request a Kit by creating an account on fontawesome website. They will give you something like this: <script src="https://kit.fontawesome.com/fc188b5fd5.js" crossorigin="anonymous"></script> or you can simply use this. For displaying the envelope you need to change from <i class="fab fa-envelope"></i> to <i class="fa fa-envelope"></i>.