shopify - .liquid ファイルでフォントの素晴らしいアイコンがガベージに変わる

Question

私は、Shopify以下で素晴らしいフォントを使用しようとしています. less ファイルを css にコンパイルすると、次のアイコンが追加されます。

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

次に、css ファイルの名前を css.liquid に変更してアップロードします。Firefox でアイコンを見ようとすると、ゴミとして出てきます。リキッドファイルがゴミにならないようにするには、何を入れるべきですか?

Answer 1

私は自分のサイトで font awesome を使用していますが、変更した唯一の部分はファイルの先頭で、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;
}