Icomoon 图标在托管网站时不显示

Question

当我在本地主机上启动我的网站时，一切正常。

但是当我在我的 plesk 网络服务器上启动它时，Icomoon 图标没有显示。

字体是这样保存的https://static.my-domain.example/fonts/icomoon.ttf。

css是这样保存的https://static.my-domain.example/css/main.css。

加载了所有其他字体，所以看起来像是 Icomoon 的问题。

这是一些例子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

尝试删除 @import 它需要 css 资源而不是字体文件 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;
}

此外，我建议首选 woff，因为它提供更好的压缩。

您还应该通过开发工具 (Ctrl + Shift + I) 检查调试信息。如果有一些关于字体文件的 404 通知 – 您需要检查这些文件是否存储在正确的位置或调整您的 path/url 参数。

Icomoon 图标在托管网站时不显示

Icomoon Icons not showing when website is hosted

css

plesk

icomoon