I recently obtained a unique icon font from Flaticon and decided to incorporate it into a SaaS online store. Since I don't have direct access to the shop's files, I attempted to host the font on an FTP server and integrate it on a demo page: here. Surprisingly, it worked well in this setup. However, when I experimented with a platform like Liveweave, instead of displaying the icons, all I saw were squares.
The CSS and font files are both stored in the same directory on the FTP server, with relative file links specified within the CSS. The CSS itself is loaded through a global link as shown below:
<link rel="stylesheet" type="text/css" href="http://sklep1807322.home.pl/pub/flat_icons/font/flaticon.css">
Snippet from the CSS file:
@font-face {
font-family: "Flaticon";
src: url("./Flaticon.eot");
src: url("./Flaticon.eot?#iefix") format("embedded-opentype"),
url("./Flaticon.woff2") format("woff2"),
url("./Flaticon.woff") format("woff"),
url("./Flaticon.ttf") format("truetype"),
url("./Flaticon.svg#Flaticon") format("svg");
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: "Flaticon";
src: url("./Flaticon.svg#Flaticon") format("svg");
}
}
[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-user:before { content: "\f100"; }
.flaticon-shopping-bag:before { content: "\f101"; }
.flaticon-search:before { content: "\f102"; }
.flaticon-menu:before { content: "\f103"; }
If anyone has insight into what I might be doing incorrectly, please let me know. Your help would be greatly appreciated!