To apply semantic principles using Font-awesome and LESS?

Question

I'm trying to use Font-awesome in the same way I do with Bootstrap, in accordance with the semantic principles of web design (not putting billions of non-semantic classes in my HTML tags), using LESS.

It seems that it is impossible : the icon definitions are like that :

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

This isn't a mixin definition but a classical CSS rule build with LESS variables.

So, i'm unable to do this kind of declaration :

.meaning-class-name {
    .fa-home;
}

Lessc complain that .fa-home is undefined.

Is it a way to avoid to rot my HTML code ? Is there a way to attribute a class to an other class with less ?

Thanks !

Answer 1

I found that the better solution were to modify font-awesome/less/icons.less and rewrite the declarations according this pattern :

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

It is similar to the glyphicons.less used by Bootstrap.

PS : In Eclipse, this can be done quickly with the find/replace tool :

Find :

\.@\{fa-css-prefix\}-([-0-9a-zA-Z]+):before \{ content: @([-0-9a-zA-Z]+); \}

Replace :

.@{fa-css-prefix}-$1 { &:before { content: @$2; } }

and

Find :

\.@\{fa-css-prefix\}-([-0-9a-zA-Z]+):before,

Replace :

.@{fa-css-prefix}-$1,