How to use Font Awesome with Bootstrap LESS theme? 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:

&lt;button type="button" class="btn btn-default btn-lg"&gt;
  &lt;span class="fa fa-camera-retro" aria-hidden="true"&gt;&lt;/span&gt; Camera
&lt;/button&gt;';


After recompiling my LESS: nothing. What am I missing. Thanks.
Figured it out. Add:

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


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