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.
throw "There was a problem cloning repo: " + self.url;
There was a problem cloning repo: https://github.com/alexnotov/meteor-bootstrap-and-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 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)
| |____ font
| |____ robots.txt
| |____ other static assets
| |____ awesomeapp.css
| |____ font-awesome.css ( all font awesome css files)
| |____ appserver.js ( Loaded only on the server side)
| |____ 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.
src: url('/font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
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)