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

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 >
    <div >
      <div >
        <ul >
          <span>Adress</span>
          <li>
            <p>ENGLAND</p>
          </li>

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

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

      <div >
        <ul >
          <span>Contact</span>
          <li>
            <a href="#">Contact Form</a>
          </li>

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

      <div >
        <ul >
          <span>SOCIAL</span>
          <li>
            <a href="#"><i  aria-hidden="true"></i></a>
          </li>

          <li>
            <a href="#"><i ></i></a>
          </li>

          <li>
            <a href="#"><i ></i></a>
          </li>

          <li>
            <a href="#"><i ></i></a>
          </li>

          <li>
            <a href="#"><i ></i></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>

CodePudding user response：

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

CodePudding user response：

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 >
            <div >
                <div >
                    <ul >
                       <span>SOCIAL</span>    
                       <li>
                            <a href="#"><i  aria-hidden="true"></i></a>
                       </li>
                      
                       <li>
                            <a href="#"><i ></i></a>
                       </li>
                        
                       <li>
                            <a href="#"><i ></i></a>
                       </li>
                       
                       <li>
                            <a href="#"><i ></i></a>
                       </li>
                        
                       <li>
                            <a href="#"><i ></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