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:

<link  href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link  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>

NOTE: You can upgrade your current version from here.

Solution 2:

<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>

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>.