Icomoon Icons not showing when website is hosted - css

Question

When I start my website on localhost everything works perfectly fine.
But when I start it on my plesk webserver the Icomoon icons don't show up.
The font is saved like this https://static.my-domain.example/fonts/icomoon.ttf.
The css is saved like this https://static.my-domain.example/css/main.css.
All other fonts load in so it looks like a problem of Icomoon.
This is some example css:
#font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?2ljhe1');
src: url('../fonts/icomoon.eot?2ljhe1#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?2ljhe1') format('truetype'),
url('../fonts/icomoon.woff?2ljhe1') format('woff'),
url('../fonts/icomoon.svg?2ljhe1#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
#import url(../fonts/icomoon.ttf);
.setting-icon::before{
display: block;
content: '\e908';
font-family: 'icomoon' !important;
margin-top: 5px;
margin-left: 5px;
}

Answer 1

Try to delete the #import it expects a css resource but not a font file url.
#font-face {
font-family: "icomoon";
src: url("../fonts/icomoon.eot?2ljhe1");
src: url("../fonts/icomoon.eot?2ljhe1#iefix") format("embedded-opentype"),
url("../fonts/icomoon.woff?2ljhe1") format("woff"),
url("../fonts/icomoon.ttf?2ljhe1") format("truetype"),
url("../fonts/icomoon.svg?2ljhe1#icomoon") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
.setting-icon::before {
display: block;
content: "\e908";
font-family: "icomoon" !important;
margin-top: 5px;
margin-left: 5px;
}
Besides, I recommend preferring woff since it offers better compression.
You should also check debugging info via dev tools (Ctrl + Shift + I). If there is some 404 notice regarding for font files – you'll need to check if those files are stored in the right place or tweak your path/url parameters.