LESS: using font-awesome in :before

Question

I want to have a CSS selector for a header with custom font, color and a bullet to the left. So I want my header to use my custom font, and it\'s :before pseudo

Answer 1

You can not really use interpolated selectors for mixins in Less ... so the rules with interpolated selectors can not be included in other rulesets. See answer here:

LESS mixin a variable class name

But in your case you could just import the compiled css as less instead of the less files, if you are not doing any other special stuff with these less files. Simply by using:

@import (less) 'font-awesome.css';

Then you can use .fa as a mixin, exactly like you wanted.

However, this way you don't import the character variables, which you could do separately, but instead you could also just use content: "\f140"; directly (the way it's used in .fa-bullseye:before)

Or alternatively just extend the selectors imported from font-awesome.css with your selector, like so:

.bulleted-header {
    color: #61cbe6;
    font: 16px 'ds_goose', sans-serif;
    &:extend(.fa, .fa-bullseye all);
}

Hope this helps.

---

Update:

As of LESS >= 1.6 rules with interpolated selectors can be accessed as mixins. So calling .fa as a mixin, like you do in your above example, should now work perfectly.