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 !

See http://stackoverflow.com/a/20707100 and http://stackoverflow.com/a/19603404 — seven-phases-max, Sep 04 '14 at 18:58
possible duplicate of [LESS mixin a variable class name](http://stackoverflow.com/questions/19602812/less-mixin-a-variable-class-name) — seven-phases-max, Sep 04 '14 at 18:58

Pierre-Yves Le Dévéhat · Accepted Answer · 2014-09-05T09:13:52.427

2

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,

edited Sep 05 '14 at 09:13

answered Sep 05 '14 at 08:05

Pierre-Yves Le Dévéhat

1,015
11
24

This does the trick but then you'll need to do that for each new FA version. – seven-phases-max Sep 05 '14 at 08:06
1

So, btw, technically it more easy to create our own mixin w/o modification of any FA sources. The mixin would be as simple as [this](https://gist.github.com/seven-phases-max/73bd98514b4da5a5c421#file-25668704-less) (one mixin for all icons). – seven-phases-max Sep 05 '14 at 08:24
Your solution is good too, but sometimes, the `@fa-var-something` variable doesn't match exactly the faont-awesome class. Example : `.fa-bar-chart ` points to the `@fa-var-bar-chat-o` variable. Your solution prevent just reading the font-awesome icons descriptions webpage to write your definitions. – Pierre-Yves Le Dévéhat Sep 05 '14 at 08:44
3

I did a pull request in GitHub. Maybe my modifications will be accepted and integrated in the official version... – Pierre-Yves Le Dévéhat Sep 05 '14 at 09:22

To apply semantic principles using Font-awesome and LESS?

1 Answers1