Icomoon Icons not showing when website is hosted

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;
  }

Also `url(../fonts/icomoon.ttf)` is a relative path, so if you the fonts must always be located one level up from the current page, ensure that's actually where they are. — Alicia Sykes, Apr 27 '22 at 00:17

herrstrietzel · Accepted Answer · 2022-04-26T23:46:05.057

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.

Icomoon Icons not showing when website is hosted

1 Answers1