在Shopify商店中使用Font Awesome库 [英] Using Font Awesome library in a Shopify store

问题描述

我正在尝试使用真棒字体":

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文件中，该文件存放在资产/

中

@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上不起作用吗?我觉得我缺少一些小东西，但我无法弄清楚.

解决方案

您将要在CSS中使用流动资产URL助手.可以在此处 http://wiki.shopify.com/Asset_url 找到更多有关资产URL助手的文档. /p>

I'm trying to use Font Awesome:

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

I've used these font icons on several Rails projects with no problem but for some reason when I try to use them in a Shopify store they don't get rendered.

I'm using another @font-face with no difficulties but for some reason this @font-face is not rendering.

In assets/ I have:

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

And I load them with @font-face just like I do with another font-face that works fine. in my stylesheet.css which lives in 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;
  }

But when I try to use the icons they can't seem to load. Any idea why this isn't working on Shopify? I feel like I'm missing something small but I can't figure it out.

解决方案

You will want to use the liquid asset URL helper in your CSS. More docs on the asset URL helper can be found here http://wiki.shopify.com/Asset_url

这篇关于在Shopify商店中使用Font Awesome库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！