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..

    How to set shadow on top of a CSS border?

    SCSS, Compass and GULP: How to minify without breaking CSS?

    How to change custom Check Box border with Dart

    How to setup CSS for multiple font choices? [closed]

    How can I create HTML/CSS responsive tile?

    how to arrange divs with css as a grid?

    How to CSS Display:table grow right

    How to use Bootstrap style of BreadCrumb with my ASP.NET menu?

    How to prevent CSS table-cell content expanding to full height of row

    What's the best way to show (un/ordered) HTML lists as a top-down tree?

    CSS: How to make link colour the same as parent div

    How to get background img to show up in :after selector?

    How to switch left and right in a css file?

    How to include LESS files in web page using Web Essentials?

    How to fit content of a DIV with fixed height

    how to deselect a css style using javascript?

    How to prevent exceeding the parent's boundary?

    How to properly float this image verticaly aligned?

    How to change line height for small text with CSS? There seems to be a limit to how small line-height can be

    How to set full auto width for input tag

    How can I get this anchor link to look like a button

    Add background to first letter of a row of text. How?

    How to Format text boxes with Css

    how to apply jquery ui/css to forum field

    How to create a firefox addon which injects CSS into a page? [closed]

    How to design a web page with multiple color panes without tables [duplicate]

    How to create a Sass mixin for this CSS radial gradient?

    How to adjust responsive behaviour of menu bar's elements

    How to Center-Justify links in CSS?

    How to time the effect of a css look in javafx?