CODEWITHSUNDEEP
cssimagefirefox
user1084321
user1084321

Reputation: 1

Images won't show in firefox using content:url

I've been looking for an answer for 3 days straight now (i did sleep a few hours though).

I'm using a wordpress theme that integrates font awesome icons smoothly. But i wanted to alter these icons and use my own, but they won't show in Firefox but do show in Safari, Chrome etc.

I'm using this css code to alter the icon to my own icons:

.fa-euro:before {content:url(http://nip10.nl/xtra-icons/icon-2.png);}
.fa-glass:before {content:url(http://nip10.nl/xtra-icons/icon-1.png);}
.fa-bell:before {content:url(http://nip10.nl/xtra-icons/icon-3.png);}
.fa-coffee:before {content:url(http://nip10.nl/xtra-icons/icon-4.png);}

You can see the website here: www.nip10.nl

Hope someone can tell me how i can alter the css code so the icons also show in FireFox.. I've tried anything from naming images to .jpg files etc. etc..

Upvotes: 0

Views: 146

Answers (1)

Joseph Marikle
Joseph Marikle

Reputation: 78520

You should validate your HTML. See here: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.nip10.nl

I'm going to guess that the problem is that firefox is running into this error

Line 1069, Column 26: Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)

And failing to parse the embedded style sheet. You should also not embed your large stylesheets like that. Make them external style sheets. Once that's done, find where your HTML error is that's causing the validator to think you don't have the style sheet in the head tag and it should fix itself.

Upvotes: 1

Related Questions