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! 
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.
NJ
