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


Tags: css,twitter-bootstrap,less,font-awesome

Problem :

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


Solution :

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";

    CSS Howto..

    CSS / jQuery: How to prevent tooltip from disappearing behind border of main wrapper (working code)

    How to stack text with pure CSS?

    DIV Background Image Doesn't Show in Firefox or Chrome (But only online). Online it works for IE?

    how to make smooth grayscale on hover using CSS

    How do I overlay a div on an empty div containing a background image?

    How can I place two headings next to each other using CSS?

    How to add !important to every element in a CSS file [duplicate]

    How to make sure CSS/JS files are not cached on browser? [duplicate]

    How to create a QT plugin that customizes UI?

    How can I group DIVs in my document so I can apply CSS to them?

    How to add footer to the bottom of the page

    How to get a 2 column widget area defined in CSS?

    How to create shadow in JSF input field

    How to style a form action [closed]

    How do I use a variable inside of a shorthand if/else statement in a PHP for() loop?

    How to deal with different stylesheets (WYSIWYG Editor and Webpage one) in the same page?

    How to specify background image height in div Container

    How to make Zig Zag borders using CSS? [closed]

    How do I add a hover to this css class for a tr?

    How do I make a nested
    expand to its contents?

    How to proportionally fit a variable number fieldsets inside a parent div

    How to make the text that are typed inside the input to appear into a seperate div

    How to build flexible structure?

    How to avoid wrapping in CSS float

    How to create a table inner bevel in HTML/CSS?

    How to only make a css element appear on one page?

    How to align two different font-sizes next to each other?

    How to scroll a page or a element using css

    CSS Flexbox : How to construct a specific layout

    How do I append jumping dots to a text in html and css