3

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
Community
  • 1
  • 1
Jeromy French
  • 11,812
  • 19
  • 76
  • 129

1 Answers1

6

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";
Jeromy French
  • 11,812
  • 19
  • 76
  • 129
  • eum why ask the question with a bounty and reply to it 2 min after ? – Patsy Issa Jul 22 '13 at 17:28
  • 1
    @PatsyIssa: I didn't sponsor the bounty--@DourHighArch sponsored it 10 days after I asked/answered (PS--thanks DHA!) – Jeromy French Jul 22 '13 at 17:41
  • 1
    @Patsy, I just reviewed a few dozen useless edits, and Jeromy made a series of great edits. These points will push him over the threshold to not need me to review his edits. Also, answering one's own question is good as well. – Dour High Arch Jul 22 '13 at 18:04
  • 1
    @DourHighArch by all means mate, was just curious – Patsy Issa Jul 22 '13 at 18:27