Font Awesome Nesting Classes

Question

I'm trying to nest a bunch of font awesome styles into a single css class I can use whenever I'd like. However, I'm getting an error with "Undeclared Mixin".

My .less file looks something like this:

@import (reference) "../Content/bootstrap/font-awesome/font-awesome.less";



.step-current {

    .fa;

    .fa-play;

    .text-success;

}

In this case all I'd like to do is apply the styles .fa, .fa-play, and .text-success whenever I use the class step-current on an element. However, I'm getting an error when I try to compile this less file (using Web Compiler 2015).

.fa-play is an Undeclare Mixin.

Obviously I could just go like this: class="fa fa-play text-success" within my tag but I'd really like to know if it's possible to do the above.

Thanks

Answer 1

LESS is tripping up because Font Awesome doesn't style .fa-play, only .fa-play:before. Get around this by using LESS's :extend syntax (see also this css-tricks write-up/tutorial). The key is the all keyword, which will bring in the :before styles.

.custom-class {
    &:extend(.fa, .fa-play all);
    .text-success
}

(Just guessing about what to do with your .text-success - that doesn't appear to be part of Font Awesome… but then it wasn't part of your problem, so I guess it doesn't matter. You might need to use :extend to pull it in, or you might be able to just use it as a normal old LESS mixin as I did above.)

Font Awesome Nesting Classes

Sign up