CODEWITHSUNDEEP
twitter-bootstraplessfont-awesome
lifo
lifo

Reputation: 2893

Less CSS "alias" with bootstrap + font-awesome

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'm doing this is because I have a "Domain" entity on my site and I might change the icon in the future so I don't want to directly use to the "fire" icon in my HTML.

The icon-group class works on my code but icon-domain does not. From what I can tell, its because font-awesome actually has an icon-group class in its code. From what I understood of lesscss I can include a class inside another class to combine them into a new class but its simply not working here.

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

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

But that is not ideal since I have to define the content myself and using .icon-domain { .icon-fire; &:before; } is a syntax error. Is there a anyway to make this work properly?

Upvotes: 7

Views: 3225

Answers (2)

Michał Rybak
Michał Rybak

Reputation: 8706

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

Without it LESS won't be able to detect the classes you are trying to use.

Upvotes: 1

Régis B.
Régis B.

Reputation: 10588

You need to include the adequate bootstrap dependencies:

@import "bootstrap/variables.less";
@import "bootstrap/mixins.less";
@import "bootstrap/sprites.less";

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

Upvotes: 0

Related Questions