4

I have a main.less file that I'm trying to compile with font-awesome classes.

My less file is very simple :

@import "../bower_components/bootstrap/less/bootstrap.less";
@import "../bower_components/fontawesome/less/font-awesome.less";

.button {
    .btn;
    .btn-sm;
    .btn-primary;
    span {
        .fa;
        .fa-folder-open;
    }
}

I use the less compiler provided by grunt-contrib-less.

The output is :

>> NameError: .fa-folder-open is undefined in less/main.less on line 10, column 3:
>> 9           .fa;
>> 10          .fa-folder-open;
>> 11      }
Warning: Error compiling less/main.less Use --force to continue.

Aborted due to warnings
  • Less version : 1.7.4
  • Grunt-contrib-less version : 0.11.4
  • Font-awesome version : 4.1.0

Where is the problem ?

Pierre-Yves Le Dévéhat
  • 1,015
  • 11
  • 24

1 Answers1

1

The only solution i found is to modify Font-awesome's less file icons.less. I replaced 

.@{fa-css-prefix}-home:before { content: @fa-var-home; }

with

.@{fa-css-prefix}-home { &:before { content: @fa-var-home; } }
Pierre-Yves Le Dévéhat
  • 1,015
  • 11
  • 24
  • I'm stuck on the npm font-awesome (4.7) package and have the exact same issue. Does anyone know any *real* fix to this? The main issue with this answer is that I have to modify the package which of course does not translate to the next developer or include the changed files in the repository, defeating the point of using npm. – dotnetCarpenter Mar 05 '18 at 17:18
  • OK, found a *real* solution here: https://github.com/FortAwesome/Font-Awesome/issues/9097#issuecomment-269611413 – dotnetCarpenter Mar 05 '18 at 17:20