Less CSS alias with bootstrap + font-awesome

Question

My site uses bootstrap + font-awesome , and I'm trying to create an "alias" in my site.less file:

 .icon-domain { .icon-fire; } .icon-group { .icon-tags; } 

The reason I do this is because I have a Domain object on my site and I can change the icon in the future, so I don’t want to use the fire icon directly in my HTML.

The icon-group class works on my code, but the icon-domain does not work. From what I can say, its because font-awesome actually has an icon-group class in its code. From what I understood from lesscss , I can include the class inside another class to merge them into a new class, but it just doesn't work here.

I can make it work if I do this in my site.less :

 .icon-domain { &:before { content: "\f06d"; } } 

But this is not ideal, since I have to determine the content myself, and using .icon-domain { .icon-fire; &:before; } .icon-domain { .icon-fire; &:before; } .icon-domain { .icon-fire; &:before; } is a syntax error. In any case, for this work to work properly?

Answer 1

You need to import the Font Awesome CSS into your LESS file and let LESS handle it .

Without this, LESS will not be able to detect the classes you are trying to use.

Answer 2

You need to enable the appropriate bootstrap dependencies:

 @import "bootstrap/variables.less"; @import "bootstrap/mixins.less"; @import "bootstrap/sprites.less"; .icon-domain { .icon-fire; } .icon-group { .icon-tags; }