Assuming you know what Twitter Bootstrap, Font Awesome and Bootswatch are, here is how to integrate the happy trio.
Install a LESS Compiler
In order to glue everything together we would need a LESS compiler. The easiest way to install a LESS compiler is via Node Package Manager (a.k.a npm). If you need to install NPM, you can choose a “zero line” or a “fancy install” from npmjs.org
Once NPM is good to go, installing a LESS compiler is as simple as:
$ npm install --global less |
Connect Font Awesome with Twitter Bootstrap
Follow first 3 steps from integration instructions from Font Awesome people. In case you plan not to have your fonts in “../font”, open “font-awesome.less”, and change the path accordingly:
@fontAwesomePath: '../font'; |
Less Twitter more Bootswatch
At this point you have Font Awesome integrated with Twitter Bootstrap’s LESS. Now we need to download Bootswatch LESS files and merge them with Twitter’s. Assuming you are in “twitter-bootstrap/less” directory…
- Go to one of the Bootswatch themes and download “variabless.less” and “bootswatch.less”
- Now replace the default “variables.less” with one from Bootswatch
- Copy “bootswatch.less” to the same directory as the other LESS files (e.g.”twitter-bootstrap/less”)
- Open up bootstrap.less and add the line “@import “bootswatch.less”;” just before the last “utilities” import statement:
It would look similar to:
@import "carousel.less"; @import "hero-unit.less"; @import "bootswatch.less"; // <<<<<< add this line // Utility classes @import "utilities.less"; // Has to be last to override when necessary |
Creating the One and Only “bootstrap.css”
The final step is to compile the freshly baked “bootstrap.less” into a “bootstrap.css”:
$ lessc --compress ./less/bootstrap.less > bootstrap.css |
Big Thanks
to Thomas Park, the author of Bootswatch, who helped to put the above steps together.