Integrating Font Awesome with Bootswatch

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”
  • It would look similar to:

  • 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:
  • @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.