在Shopify商店中使用Font Awesome库

Question

我正在尝试使用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吗？我觉得我错过了一些小事,但我无法理解.

Answer 1

最简单的解决方案是将其附加到theme.liquid的标题中

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

没有额外的上传.没有安装.没有麻烦.完成.

谢谢MaxCDN :)

Answer 2

您将需要在 CSS 中使用流动资产 URL 帮助器。有关资产 URL 帮助程序的更多文档可以在此处找到https://shopify.dev/docs/themes/liquid/reference/filters/url-filters#asset_url