Я скачал пользовательский значок шрифта из Flaticon и попытался использовать его в магазине типа SaaS. Поскольку у меня нет доступа к файлам магазина, я попытался разместить шрифт с ftp-сервера и попытался заставить его работать на демонстрационной странице: здесь . Это работает, но когда я пытаюсь использовать что-то вроде livewave , все, что я получаю, это квадрат вместо значка.
на ftp-сервере css и файлы шрифтов находятся в одном каталоге и я использовал относительные ссылки на файлы в css, но сам css включен с глобальной ссылкой, подобной этой:
<link rel="stylesheet" type="text/css" href="http://sklep1807322.home.pl/pub/flat_icons/font/flaticon.css">
файл css выглядит следующим образом:
@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"; }
Кто-нибудь знает, что я делаю не так?