How can I customize the CSS generated by LESS to include Font Awesome?
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
Following the pattern suggested in Font Awesome's "getting started" section, edit the
MyApp/common_files/less/style.less file to
- import the
- 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 define path to Font Awesome 3's font folder*/ @FontAwesomePath: "../../../Font-Awesome/font";