Using FontAwesome wrapped in own css rule

Question

I develop wordpress theme using roots theme framework and I usually use Bootstrap glyphicon like this:

.icon-mobile-application {
    .glyphicon;
    .glyphicon-asterisk;
}

Now I want to use font-awesome in similar way so I include font-awesome.less in my app.less and wrap it in my own css rule like this:

.icon-web-development {
    .@{fa-css-prefix};
    .@{fa-css-prefix}-code;
}

But when I try to compile it return error:

>> Parser error in app.less
>>       93.     .icon-web-development {
>>       94.         .@{fa-css-prefix};
>>       95.         .@{fa-css-prefix}-code;
Warning:  Use --force to continue.

I also try:

.icon-web-development {
    .fa;
    .fa-code;
}

Showing error: Fatal error: .fa is undefined. What am I missing here?

possible duplicate of [**LESS mixin a variable class name**](http://stackoverflow.com/questions/19602812/less-mixin-a-variable-class-name). The problem is that you can not dynamically call mixins (using string interpolation). My answer there suggests some solutions, or you could import the compiled font-awesome.css `@import (less) 'font-awesome.css';` and use the rules as mixins ... that would work - see here: [**LESS: using font-awesome in :before**](http://stackoverflow.com/questions/20394032/less-using-font-awesome-in-before/20395403#20395403) — Martin Turjak, Feb 19 '14 at 11:01

Using FontAwesome wrapped in own css rule

0 Answers0