Icon font in Rails App not loading - ruby-on-rails-3

Question

I am trying to include a custom font in my rails app as an icon font. (I'm using font-awesome)
The fonts are loading but the preview is completely incorrect: http://cl.ly/image/3x0g3X3k3X3S. (I think this means the asset-path is correct.)
You can also see here in the network view that the fonts appear to be coming in:
http://cl.ly/image/0y0R171S0l3L
In the HTML - when I try a I can see all the correct CSS properties that should apply but the icon renders as a empty square which I believe is the missing character default.
Please let me know if I can provide more information. Any help would be awesome!

Answer 1

I've also been struggling on those lines and have the following that works
In assets/fonts put fontawesome-webfont.eot, ttf, and woff files
In your css file put the following code (substitute iconmoon for fontawesome
#font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[data-icon]:before {
font-family: 'icomoon';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-size: 16px;
line-height: 16px;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
In your erb use the following, substitute xe04b for the image you want to use
<div class="fs1" aria-hidden="true" data-icon=""></div>
hope that helps?