Highlighted

Social Network Icons visible on dreamweaver but not browser?

New Here ,
Oct 04, 2017

Copy link to clipboard

Copied

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>

Views

644

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Social Network Icons visible on dreamweaver but not browser?

New Here ,
Oct 04, 2017

Copy link to clipboard

Copied

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>

Views

645

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 04, 2017 0
LEGEND ,
Oct 04, 2017

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 04, 2017 0
Adobe Community Professional ,
Oct 05, 2017

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 05, 2017 2
New Here ,
Oct 06, 2017

Copy link to clipboard

Copied

Thank you, Nancy! That resolved the issue instantly!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 06, 2017 0
osgood_ LATEST
LEGEND ,
Oct 06, 2017

Copy link to clipboard

Copied

ak5592kif  wrote

Thank you, Nancy! That resolved the issue instantly!

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 06, 2017 0