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.

Answer 2

I had the same problem using the SASS-implementation. I changed the .@{fa-css-prefix} code so it does .@{fa-css-prefix}:before and this worked pretty fine for me. You still have to extend your base element then, but the font-style is only applied to the :before

I actually wondered why they did it like that. I think their approach was that you have single dom elements for every icon (like the <i> they use) and no icon in front of a button, link, list item or whatever as you would usually do it. But as far as I remember this was the case in the last fontawesome version.