shopify - .liquid 文件中的超赞字体图标变成垃圾

Question

我正尝试在 Shopify 和 less 中使用很棒的字体。我将 less 文件编译成 css 并添加了以下图标。

.icon-caret-down:before {
  content: "\f0d7";
}

然后我将我的 css 文件重命名为 css.liquid 并上传它。当我试图在 firefox 中查看图标时，它显示为垃圾。我应该在我的液体文件中放入什么，以免它变成垃圾？

Answer 1

我在我的网站上使用了很棒的字体，我唯一更改的部分是文件的顶部，以将 asset_url 过滤器添加到 less 文件中。看看是否有帮助。这是它的样子:

@fontAwesomePath: '../font';

@font-face {
  font-family: 'FontAwesome';
  src: url('{{ "fontawesome-webfont.eot" | asset_url }}');
  src: url('{{ "fontawesome-webfont.eot?#iefix" | asset_url }}') format('embedded-opentype'),
    url('{{ "fontawesome-webfont.woff | asset_url }}') format('woff'),
    url('{{ "fontawesome-webfont.ttf" | asset_url }}') format('truetype'),
    url('{{ "fontawesome-webfont.svg#FontAwesome" | asset_url }}') format('svg');
  font-weight: normal;
  font-style: normal;
}