HTML Elements Not Showing Up In Browser?

[ProAZY]

Hi, recently I've attempted to create a website for a high school project included with javascript, css and everything. But after completion, I've tried to test out hosting it on a home server using WAMP; however whenever I open it, it shows all the correct elements including the video background, but for some reason it does not load any of the social media buttons that I have implemented. Furthermore trying to move the buttons somewhere else on the page didn't work. However, they do show up when I am not hosting the WAMP server as a normal .html file  and opening it that way instead of visiting the web address. The code I have used for the social media buttons are as follows:

 

                   <h2 class="small-background-title"><span>Find us on social media</span></h2>

                         <ul class="socials">

 

                        <li><a href="#" target="_blank"><i class="fa fa-facebook-square fa-3x"></i></a></li>

                        <li><a href="#" target="_blank"><i class="fa fa-twitter-square fa-3x"></i></a></li>

                        <li><a href="#" target="_blank"><i class="fa fa-google-plus-square fa-3x"></i></a></li>

                        <li><a href="#" target="_blank"><i class="fa fa-instagram fa-3x"></i></a></li>

                        <li><a href="#" target="_blank"><i class="fa fa-youtube-square fa-3x"></i></a></li>

 

                      </ul>

 

 

[snkmoorthy]

 

 <li><a href="#" target="_blank"><i class="fa fa-facebook-square fa-3x"></i></a></li>

                        <li><a href="#" target="_blank"><i class="fa fa-twitter-square fa-3x"></i></a></li>

                        <li><a href="#" target="_blank"><i class="fa fa-google-plus-square fa-3x"></i></a></li>

                        <li><a href="#" target="_blank"><i class="fa fa-instagram fa-3x"></i></a></li>

                        <li><a href="#" target="_blank"><i class="fa fa-youtube-square fa-3x"></i></a></li>

 

You have not added any text or you have not defined anything in the CSS for classes - fa-twitter.. fa-google.. fa-instagram...

 

To simplify you can add img tags in the <a> tags.

 

<a href="#" target="_blank"><i class="fa fa-facebook-square fa-3x"></i><img src="facebook.jpg"></a>

[flowzy]

The core of the issue might be the actuall implementation of the Font Awesome's stylesheet.

Check if it's a valid link (for example - "http://localhost/font-awesome.css" or just "/font-awesome.css").

Also, check if you have the actuall Font Awesome stylesheet on your WAMP server.

More on how to install Font Awesome on your website here.

 

Cheers.

[ProAZY]

The core of the issue might be the actuall implementation of the Font Awesome's stylesheet.

Check if it's a valid link (for example - "http://localhost/font-awesome.css" or just "/font-awesome.css").

Also, check if you have the actuall Font Awesome stylesheet on your WAMP server.

More on how to install Font Awesome on your website here.

 

Cheers.

Well, for this, in the head of the html, it says I have implemented this: 

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

which provides the font offline, but not when online. I haven't actually downloaded the font and put it within the folder. Could the problem be that its connecting to another host server? 

 

Many thanks.

[ProAZY]

You have not added any text or you have not defined anything in the CSS for classes - fa-twitter.. fa-google.. fa-instagram...

 

To simplify you can add img tags in the <a> tags.

 

<a href="#" target="_blank"><i class="fa fa-facebook-square fa-3x"></i><img src="facebook.jpg"></a>

Relating to this, I have implemented at the top, within the head:

 

<link rel="stylesheet" href="css/normalize.css" media="all">

    <link rel="stylesheet" href="css/style.css" media="all">

 

Which, from what I've done am pretty sure that it implements the CSS for those classes. Trying to implement that code gives me a blank icon so I'm not sure what's wrong. 

 

Many thanks.