How to manually load FontAwesome 4 in Meteor.js

Question

I always find it difficult to manually load external libraries in Meteor.js due to its non-traditional way. I need some advice on how to load these libraries in the cleanest possible way

1 client
2 server
3 packages
4 public
  4.1 resources
  4.2 font-awesome
    4.2.1 css
    4.2.2 fonts
    4.2.3 less
    4.2.4 scss
  4.3 fonts

Above is my root structure. In the public folder, I have all the images under resources and then the folder for font-awesome 4. Now, when I load this it shows the square symbol meaning it's not loading it properly.

I was under the impression that there is no need to reference any CSS etc in meteor as it's all bundled together at runtime. Am I missing something?

I did try using the meteorite packages but it just installs stuff and does nothing! I'd rather do it manually and change the references where needed.

Answer 1

Once too often, I have been asking myself this same question, if you know what I mean.

You could modify the font awesome css files so that the fonts url is referenced to /font-wesome/fonts/ instead of ../fonts. Move the css/less files (such as font-awesome.css) into /client

E.g its usually

url('../fonts/fontawesome-webfont.woff?v=4.0.3')

change it to

url('/font-awesome/fonts/fontawesome-webfont.woff?v=4.0.3')

There are also others for each type of font the above is for woff, no bone.

The directory would depend on the location of your file in /public, e.g if you used /public/danielle you would use /danielle

Adding with meteorite

If you added with meteorite don't forget to add it to meteor too i.e

mrt add font-awesome
meteor add font-awesome

or for windows

cd packages
git clone https://github.com/nate-strauser/meteor-font-awesome.git
rename meteor add meteor-font-awesome font-awesome
meteor add font-awesome