Shrikar Archak

It does not matter how slow you go so long as you do not stop. ~Confucius

FontAwesome With Meteorjs

Meteorjs

Meteorjs is a new Javascript framework for building realtime applications. More about meteor can be found here Meteorjs.One of the cool feature of Meteorjs is its package manager. Many open source libraries like twitter’s bootstrap are provided as a package. In our application we will be using bootstrap. There is a basic set of icons which are provided by twitter bootstrap but in this example I thought we will use font awesome. Font Awesome is a iconic font library designed for twitter bootstrap(Font Awesome).

Existing third party meteor packages didn’t work

There are two meteor packages which can be installed to integrate for font awesome into meteor app, but for some reason none of them worked for me.

  • bootstrap-fontawesome

/usr/local/lib/node_modules/meteorite/lib/sources/git.js:108
        throw "There was a problem cloning repo: " + self.url;
                                                   ^
There was a problem cloning repo: https://github.com/alexnotov/meteor-bootstrap-and-font-awesome
  • font-awesome

Errors prevented startup:
Exception while bundling application:
Error: The package named font-awesome does not exist.
    at _.extend.init_from_library (/usr/local/meteor/app/lib/packages.js:91:13)
    at Object.module.exports.get (/usr/local/meteor/app/lib/packages.js:225:11)
    at self.api.use (/usr/local/meteor/app/lib/bundler.js:94:28)
    at Array.forEach (native)
    at Function._.each._.forEach (/usr/local/meteor/lib/node_modules/underscore/underscore.js:79:11)
    at Object.self.api.use (/usr/local/meteor/app/lib/bundler.js:93:9)
    at _.extend.init_from_app_dir [as on_use_handler] (/usr/local/meteor/app/lib/packages.js:136:11)
    at _.extend.use (/usr/local/meteor/app/lib/bundler.js:382:11)
    at Object.exports.bundle (/usr/local/meteor/app/lib/bundler.js:707:12)
    at /usr/local/meteor/app/meteor/run.js:613:26
    at exports.inFiber (/usr/local/meteor/app/lib/fiber-helpers.js:22:12)
Your application is crashing. Waiting for file change.

“Necessity is the mother of all inventions.”

Structure of our Meteor Application

The default structure of a meteor app created is different from what we will using.

Things to be done:

  • meteor create awesomeapp
  • cd awesomeapp
  • meteor add bootstrap
  • mkdir -p public/img
  • mkdir -p css
  • mkdir -p client
  • mkdir -p server
  • mv awesomeapp.css css/
  • Download font awesome from Download here.
  • unzip the folder
  • move font folder to public/
  • move all css in the unzip folder/css to css/
  • discard all other downloaded content( Remove them from the root folder)

/RootFolder
     |
     |____ public
     |         |____ font
     |         |____ robots.txt
     |         |____ other static assets
     |____ css
     |      |____ awesomeapp.css
     |      |____ font-awesome.css ( all font awesome css files)
     |____ server
     |        |____ appserver.js ( Loaded only on the server side)
     |____ client
     |        |____ appclient.js ( Loaded only on the client side)
     |_ models.js (Loaded on both client and server)
          

Note : appserver.js, appclient.js and models.js are not created by default. If we have some custom logic which needs to be executed only in server or in client can go into those files.

Modifying the fontawesome.css

Since we have put font in the public directory of the meteor app we need to change the path in font-awesome*.css as below.


@font-face {
  font-family: 'FontAwesome';
  src: url('/font/fontawesome-webfont.eot?v=3.0.1');
  src: url('/font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('/font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('/font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

You should be able to use any of the font awesome icons in your app now. Check this for integrating with your app code(Integration)

Comments