Mniej CSS "alias" z bootstrap + font-niesamowite

Question

Moja witryna używa bootstrap + font-awesome i staram się stworzyć "alias" w moim site.less pliku:

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

Powód to robię ponieważ mam w mojej witrynie element "Domena" i mogę zmienić ikonę w przyszłości, więc nie chcę bezpośrednio używać ikony "ognia" w moim kodzie HTML.

Klasa icon-group działa na moim kodzie, ale icon-domain nie. Z tego, co mogę powiedzieć, wynika to z faktu, że font-awesome ma w swoim kodzie klasę icon-group. Z tego, co zrozumiałem, mogę dołączyć klasę do innej klasy, aby połączyć je w nową klasę, ale po prostu nie działa tutaj.

mogę zmusić go do pracy, czy mogę to zrobić w moim site.less:

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

Ale to nie jest idealne, ponieważ mam do określenia zawartości siebie i za pomocą .icon-domain { .icon-fire; &:before; } jest błąd składni. Czy jest jakiś sposób, aby to działało poprawnie?

Answer 1

Musisz zawierać odpowiednie zależności bootstrap:

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

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

Answer 2

trzeba importować czcionki Niesamowite CSS do swojego MNIEJ pliku i let LESS process it.

Bez tego LESS nie będzie w stanie wykryć klas, których próbujesz użyć.