Using Font Awesome library in a Shopify store

Question

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.

Answer 1

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

Answer 2

The simplest solution is to attach this to header of theme.liquid

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

No extra uploading. No installation. No hassle. Done.

Thank you MaxCDN :)

Answer 3

You must remove #iefix and #FontAwesome in the @font-face code. Here's the correct code:

@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;
}