I have created a sub-theme, using the LESS Starterkit, of the Bootstrap theme. I would like to self host the Font Awesome icons and make them available to a custom module.

I have downloaded the Font Awesome project to: sites\all\themes\MYBOOTSTRAPTHEME\font-awesome.

Following these instructions, I have added the following (last four) lines to: sites\all\themes\MYBOOTSTRAPTHEME\less\variables-overrides.less:

//== Iconography
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.

//** Load fonts from this directory.
@icon-font-path:          "../fonts/";
//** File name for all font files.
@icon-font-name:          "glyphicons-halflings-regular";
//** Element ID within SVG icon file.
@icon-font-svg-id:        "glyphicons_halflingsregular";

//** Load Font Awesome fonts from this directory.
@fa-font-path:            "../../font-awesome/fonts/";
//** File name for all Font Awesome font files.
@fa-font-name:            "fontawesome-webfont";

I have added the following line to my custom module:

<button type="button" class="btn btn-default btn-lg">
  <span class="fa fa-camera-retro" aria-hidden="true"></span> Camera

After recompiling my LESS: nothing. What am I missing. Thanks.

1 Answer 1


Figured it out. Add:

@import "../font-awesome/less/font-awesome.less";

to sites\all\themes\MYBOOTSTRAPTHEME\font-awesome\less\font-awesome.less.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.