5

Font Awesomeを使用しようとしています：

http://fortawesome.github.com/Font-Awesome/

これらのフォント アイコンをいくつかの Rails プロジェクトで問題なく使用しましたが、何らかの理由で Shopify ストアで使用しようとするとレンダリングされません。

問題なく別の @font-face を使用していますが、何らかの理由でこの @font-face がレンダリングされません。

資産/私は持っています：

fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff

そして、正常に動作する別の font-face と同じように、 @font-face でそれらをロードします。assets/ にある私の stylesheet.css で

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

しかし、アイコンを使用しようとすると、ロードできないようです。これがShopifyで機能しない理由は何ですか? 小さな何かが欠けているような気がしますが、それを理解することはできません。

4

5 に答える 5

27

最も簡単な解決策は、これを theme.liquid のヘッダーに添付することです

<!-- Font-Awesome ================================================== -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

余分なアップロードはありません。インストールなし。手間いらず。終わり。

ありがとうMaxCDN :)

于 2015-02-17T09:19:19.407 に答える
3

CSS で Liquid アセット URL ヘルパーを使用することをお勧めします。アセット URL ヘルパーに関するその他のドキュメントは、https://shopify.dev/docs/themes/liquid/reference/filters/url-filters#asset_urlにあります。

于 2012-06-30T19:39:17.000 に答える
0 
theme.liquid

  Before the head tag </head>


    
    font-awesome.css
    @font-face {
      font-family: 'FontAwesome';
      src: url('fontawesome-webfont.eot');
      /* src: url('/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
      */ font-weight: normal;
      font-style: normal;
    
 
    
        {{ 'font-awesome'| stylesheet_tag }} 
        <script src="https://use.fontawesome.com/46b6d6c6a9.js"></script>
    <script src="{{ 'fontawesome.min.js' | asset_url }}"></script>
     
        </head>
    
    
     any where into body section  use the font icon 
    
    <div class="mb-2 col-2"> <span class="fa fa-reddit social"></span> </div>
                            <div class="mb-2 col-2"> <span class="fa fa-facebook social"></span> </div>

于 2021-09-03T09:45:17.580 に答える