'FontAwesome icons are not showing, Why? (Font-awesome/4.2.0)

Fontawesome icons are not showing up .I want to add them inside the footer .My css and html file's are in the same directory.But the icon's are still invisible.(And also page takes longer than usual to load,i guess i added enoguh information but the site still does not let me ask my question and i searched but im still clueless about it so..)

My code:

footer {
  background-color: #33383c !important;
  padding: 70px 0px;
}

footer ul li {
  padding: 5px 0px;
}

.adress span,
.contact span,
.social span {
  color: #FFF !important;
  font-weight: 800;
  padding-bottom: 10px;
  margin-bottom: 20px;
  display: block;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 3px;
}

.adress li p,
.contact li a,
.social li a {
  color: #FFF !important;
  letter-spacing: 2px;
  text-decoration: none;
  font-size: 15px;
}

.social li {
  float: left;
}

.adress,
.contact,
.social {
  list-style: none;
}

.fa {
  color: white !important;
  margin-right: 15px;
  font-size: 14px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<footer>
  <div class="container">
    <div class="row">
      <div class="col-lg-5 col-md-5 col-sm-4 col-xs-12">
        <ul class="adress">
          <span>Adress</span>
          <li>
            <p>ENGLAND</p>
          </li>

          <li>
            <p>+12905555555555</p>
          </li>

          <li>
            <p>[email protected]</p>
          </li>
        </ul>
      </div>

      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
        <ul class="contact">
          <span>Contact</span>
          <li>
            <a href="#">Contact Form</a>
          </li>

          <li>
            <a href="#">About</a>
          </li>
        </ul>
      </div>

      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
        <ul class="social">
          <span>SOCIAL</span>
          <li>
            <a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
          </li>

          <li>
            <a href="#"><i class="fa fa-github fa-2x"></i></a>
          </li>

          <li>
            <a href="#"><i class="fa fa-linkedin fa-2x"></i></a>
          </li>

          <li>
            <a href="#"><i class="fa fa-tumblr fa-2x"></i></a>
          </li>

          <li>
            <a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>
htmlcssfrontendfont-awesome


Solution 1:[1]

I managed to reproduce your problem by running the code you gave directly, locally in my browser.

The SO snippet system does add things (like doctype, body element if it's not there already etc) to the code so something was being done that allowed the FA icons to load in the snippet system but not in the raw code locally. (I don't know what, hopefully someone will explain).

Anyway, locally you can see the file not loading if you go into dev tools inspect facility.

When I added https: to the front of the url it did load and the icons showed up fine. So use this:

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

Solution 2:[2]

For me it seems to work.

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
    <meta content="utf-8" http-equiv="encoding" />
    <meta charset="utf-8" />
    <title>Social font-awesome</title>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

    <style type="text/css">
        footer{
            background-color: #33383c !important;
            padding:70px 0px;
        }          

        footer ul li{
           padding:5px 0px;
        }

        .adress span , .contact span , .social span{
          color: #FFF !important; 
          font-weight: 800; 
          padding-bottom: 10px; 
          margin-bottom: 20px;
          display: block;
          text-transform: uppercase;
          font-size: 20px;
          letter-spacing: 3px;
        }

        .adress li p , .contact li a , .social li a{
           color:#FFF !important;
           letter-spacing: 2px;
           text-decoration:none;
           font-size:15px;
        }

        .social li{
           float:left;
        }

        .adress , .contact , .social {
           list-style: none;
        }
    </style>
</head>

<body>
 <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                    <ul class="social">
                       <span>SOCIAL</span>    
                       <li>
                            <a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
                       </li>
                      
                       <li>
                            <a href="#"><i class="fa fa-github fa-2x"></i></a>
                       </li>
                        
                       <li>
                            <a href="#"><i class="fa fa-linkedin fa-2x"></i></a>
                       </li>
                       
                       <li>
                            <a href="#"><i class="fa fa-tumblr fa-2x"></i></a>
                       </li>
                        
                       <li>
                            <a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
                      </li>
                     </ul>
                </div>
           </div> 
        </div>
    </footer>

</body>

</html>

Have you tried making a ping ?

$] ping maxcdn.bootstrapcdn.com
...
^C
--- maxcdn.bootstrapcdn.com ping statistics ---
3 packets transmitted, 3 received, 0% packet loss, time 2002ms

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 A Haworth
Solution 2 No Name

Related Questions