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>abc@gmail.com</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>
samaritan
  • 74
  • 9
  • Looks like they're working to me? You could try a different CDN and see if anything changes? Here's one: https://cdnjs.com/libraries/font-awesome/4.2.0 Maybe try adding the `https:` into the href and see if that's throwing it off on a local level? – AStombaugh May 14 '22 at 01:45
  • Working fine. Try to change CDN as the other suggested or download and self hosted. – vee May 14 '22 at 03:40
  • Are you saying that when you click 'Run code snippet' on this question you don't see the icons, or is it when you are running your code independent of the SO system? – A Haworth May 14 '22 at 08:53
  • OK, I managed to reproduce the problem locally. – A Haworth May 14 '22 at 09:06

2 Answers2

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">
A Haworth
  • 30,908
  • 4
  • 11
  • 14
  • The OP's CSS start with `//` this means if the requested URL is HTTP then it will be `http://maxcdn....` and file won't load but if the requested URL is HTTPS then it will be `https://maxcdn....` then it will be working fine. – vee May 14 '22 at 16:10
  • @vee I still don’t understand why running it as SO snippet worked and as plain in a browser didn’t. – A Haworth May 14 '22 at 18:00
  • Because StackOverflow use HTTPS, running anything start with `//` will always become `https://`. That's why it work on SO. – vee May 15 '22 at 13:43
  • Read more on [this question](https://stackoverflow.com/questions/9646407/two-forward-slashes-in-a-url-src-href-attribute) and all duplicated links. They are really good explained. – vee May 15 '22 at 13:46
0

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
No Name
  • 162
  • 1
  • 3
  • 6