Font Awesome Is Not Showing Icon

Font Awesome icons are not working, I have included all required files

Under your reference, you have this:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Specifically, the href= part.

However, under your full html is this:

<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Have you tried replacing src= with href= in your full html to become this?

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Works for me: http://codepen.io/TheNathanG/pen/xbyFg

Why some of the FontAwesome icons are not showing?

You are using few icons from fontawesome 5. for example fa-brain. You need to update css link and font classes accordingly.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" crossorigin="anonymous">

<!-- Load font awesome icons -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">

<!-- The social media icon bar -->

<div class="icon-bar">

  <a href="#" class="facebook"><i class="fab fa-facebook-f"></i></a>

  <a href="#" class="twitter"><i class="fab fa-twitter"></i></a>

  <a href="#" class="google"><i class="fab fa-google"></i></a>

  <a href="#" class="linkedin"><i class="fab fa-linkedin-in"></i></a>

  <a href="#" class="youtube"><i class="fab fa-youtube"></i></a>

  <a href="#" class="calculator"><i class="fas fa-calculator"></i></a>

  <a href="#" class="brain"><i class="fas fa-brain"></i></a>

</div>

Font-Awesome version 6 icons not showing

This is because the icon fa-solid fa-square-info is a PRO icon and it's not available for use in the free version of font-awesome. So the icon is not rendering. Alternatively you can try using Material Design Icons which is open source and free to use.

Font Awesome icon not showing, but other do

The fill after the icon name is a bootstrap thing but you need to change the fa or fas to bi

see the available icons for bootstrap and font-awesome

here is how you can use both font awesome and bootstrap icons:

<!--  Font Awesome cdn -->
<link rel="stylesheet" 
 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<!--  Bootstrap cdn -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

 
<h5>font awesome Icon :</h5>
<i class="fa fa-person"></i>

<h5>Bootstrap Icon :</h5>
<i class="bi bi-person-fill"></i>

FontAwesome icons not showing, why?

Use this cdn link and remove all other fontawasome cdn links

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

For Example :

    <html>
    
    <head>
      <title>Demo</title>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    </head>
      <i class="fa fa-address-book" aria-hidden="true"></i>
    </html>

Font Awesome not working, icons showing as squares

According to the documentation (step 3), you need to modify the supplied CSS file to point to the font location on your site.

Fontawesome 5 icon not showing in normal HTML and CSS file?

Make sure you have installed Font Awesome Package which can be done using this command - npm install --save @fortawesome/fontawesome-free

or use the CDN

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>