the icons break when deployed using rails, spread with an elegant extension


I have spree 2-1-stable running with rails 4.0.2. I added the spree-fancy extension.
Everything looks good on the development server.

When I deploy to production the icons break (e.g. cart, search, account icons). The icon html is:

<i class="icon-basket"></i>

the css is:

.icon-basket:before { content: '\e73d'; }
[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: 'icons';

I can replicate the issue with my development environment by removing the line: font-family: 'icons'. This issue happened on Heroku and on my own server running nginx. Examining the source html and css on both pages, everything looks the same. Any suggestions or insights would be greatly appreciated.

I got the same issue with rails 4.0.2 and spree 2-1-stable and it took me the last 4 hours to find a workaround. You already mentioned it yourself, but maybe it saves others some time (even if it's not a real solution):

Just find the missing .woff's or whatever and copy them to the right directory. In my case those were needed:

  1. icon.wuff from

  2. fontawesome-webfont.woff from here

  3. ui-bg_flat_75_ffffff_40x100.png from jquery (just google it)

Just insert them into the directory the server/browser is complaining about.