I'm working on a website: http://www.chictreatz.com
The problem I have is that the social network icons for my site do not display in web browsers. The URL for the social networks are there because I can move my cursor over the position where the icons are suppose to be and click them, but the icons are invisible. I can't figure it out. Anybody else have this problem?
This is my social networks code:
<!-- Icons -->
<li><a href="http://www.facebook.com/chictreatz.chictreatz" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<li><a href="http://www.instagram.com/chictreatz" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
The link to your font awesome css stylesheet points to your local machine:
@import url("file:///Macintosh HD/Users/Keef/Downloads/221-fall2016/html5up-big-picture/assets/css/font-awesome.min.css");
As do quite a lot of other links, backgrounds etc:
background: url("file:///Macintosh HD/Users/Keef/Downloads/221-fall2016/html5up-big-picture/assets/css/images/overlay.png");
You need to go through your css stylesheet and make sure the links are correct. Did you define a site root folder at the outset of your project?
Font Awesome is hosted on Max CDN. Use the CSS link shown below and your icons will appear.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
Thank you, Nancy! That resolved the issue instantly!