csspleskicomoon

Icomoon Icons not showing when website is hosted


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

Solution

  • 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.