lessfont-awesomefont-awesome-4

font-awesome and less : icon classes unreconized


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

Where is the problem ?


Solution

  • 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; } }