How can I customize the CSS generated by LESS to include Font Awesome?

Question

I want to customize Bootstrap's CSS by layering in Font Awesome as a replacement for Bootstrap's default Glyphicons.

How can I customize the CSS generated by LESS to include Font Awesome in a way that won't break if I update the core Bootstrap files? Note: Font Awesome suggests altering the core Bootstrap 'bootstrap.less' file to replace @import "sprites.less"; with @import "path/to/font-awesome/less/font-awesome.less";, but this change would get overwritten if the Boostrap core were to be replaced (by a version upgrade, for example).

Similar to my earlier question ("How can I customize Twitter Bootstrap's CSS using LESSCSS variables?"), we can assume I have this file structure:

/html
    /bootstrap
       ...etc...
       /js
       /less
    /Font-Awesome
       /css
       /font
       /less
       ...etc...
    /MyApp
       ...etc...
       /common_files
          /less
             style.less

Answer 1

Following the pattern suggested in Font Awesome's "getting started" section, edit the MyApp/common_files/less/style.less file to

1. import the font-awesome/less/font-awesome.less file, then
2. define the LESS variable '@fa-font-path' (for Font Awesome 4+) or '@FontAwesomePath' (for Font Awesome < 4)

So, given the directory structure in the question:

@import "../../../bootstrap/less/bootstrap.less";
@import "../../../bootstrap/less/responsive.less";
/* include the Font Awesome CSS */
@import "../../../Font-Awesome/less/font-awesome.less";

/* define path to Font Awesome 4's font folder*/
@fa-font-path:   "../../../Font-Awesome/fonts";

Or

/* or define path to Font Awesome 3's font folder*/
@FontAwesomePath:   "../../../Font-Awesome/font";