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 加载它们，就像我用另一个可以正常工作的字体一样。在我的 stylesheet.css 中，它位于 assets/

@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 中使用流动资产 URL 帮助程序。有关资产 URL 帮助程序的更多文档可以在这里找到https://shopify.dev/docs/themes/liquid/reference/filters/url-filters#asset_url

于 2012-06-30T19:39:17.000 回答
1

这里的帖子有点过时了。我仍然需要进行一些故障排除。

我采用了 CDN 方法，并<link />在我的脑海中包含了一个标签/layout/theme.liquid：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />

我从这个网站获得了 CDN 链接：https ://cdnjs.com/libraries/font-awesome

于 2020-05-08T20:56:51.823 回答
0

您必须在代码中删除#iefix和。这是正确的代码：#FontAwesome@font-face

@font-face {
font-family: "FontAwesome";
src: url('fontawesome-webfont.eot');
src: url('fontawesome-webfont.eot?') format('eot'), url('fontawesome-webfont.woff') format('woff'), url('fontawesome-webfont.ttf') format('truetype'), url('fontawesome-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
于 2019-06-24T23:01:57.400 回答
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 回答