Skip to main content
ak5592kif
Participant
October 5, 2017
Question

Social Network Icons visible on dreamweaver but not browser?

  • October 5, 2017
  • 2 replies
  • 1074 views

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

  <ul class="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>

  </ul>

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Community Expert
    October 5, 2017

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

    Nancy O'Shea— Product User & Community Expert
    ak5592kif
    ak5592kifAuthor
    Participant
    October 6, 2017

    Thank you, Nancy! That resolved the issue instantly!

    Legend
    October 6, 2017

    ak5592kif  wrote

    Thank you, Nancy! That resolved the issue instantly!

    Rather than papering over the cracks you need to fix them.

    Legend
    October 5, 2017

    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:

    .image:before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    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?