Fontawesome Icons Are Not Showing, Why

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

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.

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