Flaticon icons not displaying on live site - but ARE displaying locally?

We’re trying to use Flaticon icons on a site and are testing it at http://localhost/ourwebsite/. Everything looks good - the icons display locally.

However, when we upload the whole site to our live server - www.bairdswindows.co.uk - the icons don’t appear in IE or Chrome, appear as weird blocks with letters in them in Firefox and as weird squares in Safari. Stranger still, they appear as wee emoji looking icons on iPad, having changed completely from the icons they are supposed to be! :frowning:

This is my flaticon.css file:

@font-face {
font-family: “Flaticon”;
src: url(“flaticon.eot”);
src: url(“flaticon.eot#iefix”) format(“embedded-opentype”),
url(“flaticon.woff”) format(“woff”),
url(“flaticon.ttf”) format(“truetype”),
url(“flaticon.svg”) format(“svg”);
font-weight: normal;
font-style: normal;
[class^=“flaticon-”]:before, [class*=" flaticon-“]:before,
[class^=“flaticon-”]:after, [class*=” flaticon-"]:after {
font-family: Flaticon;
font-size: 20px;
font-style: normal;
margin-left: 20px;
}.flaticon-black338:before {
content: “\e000”;
.flaticon-calculator18:before {
content: “\e001”;
.flaticon-closed68:before {
content: “\e002”;
.flaticon-doorway:before {
content: “\e003”;
.flaticon-house109:before {
content: “\e004”;
.flaticon-house112:before {
content: “\e005”;
.flaticon-mall2:before {
content: “\e006”;
.flaticon-opened17:before {
content: “\e007”;
.flaticon-window-frame:before {
content: “\e008”;

The directory structure of our local site is identical to the live site - we’re just dragging the whole thing up to our public_web folder - so it has us completely stumped and we’re getting no response from Flaticon support.

Hoping someone can point out the obvious mistake. Thank you.

Check your paths.:slight_smile:

You are looking for the css file here:


But its here:


You are also looking for the fonts here :


But that’s not right either.

Thank you PaulOB. That is the weirdest thing.

I have a sub-directory, www.bairdswindows.co.uk/icons/, and everything relating to Flaticon is, 100%, in there but when I attempt to reference that in the browser it tells me that it doesn’t exist! :worried:

So I contacted my host and, sure enough, the sub-directory does exist and there are files in there, specifically everything relating to Flaticon, but it’s throwing a 404 when attempting to access any of them - for example www.bairdswindows.co.uk/icons/flaticon.html. The host even uploaded a test html file themselves and, sure enough, they got a 404.

So…I had everything right it’s just that my hosting sucks! :smile:

I moved everything into my css subdirectory and, lo and behold, it all works so thank you for pointing me in that direction anyway. I think I was just being stubborn because I was sure I had my paths correct. Turns out I did! Host is currently investigating.

Appreciate it. Thank you.

Glad you sorted it:)

My host, Fasthosts, don’t allow a sub-directory called “icons” on their shared Unix/Linux platform. It would have been nice if they’d have let us know that as I spent hours yesterday scratching my head over this issue! :rage:

Thanks for your help PaulOB.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.