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-element to use font-awesome. So I would like my :before to have the .fa class, while the whole element doesn't have this class.

I have this html: <h1 class="bulleted-header">Hello</h1> And I would like to write something like this in LESS:

.bulleted-header {
    color: #61cbe6;
    font: 16px 'ds_goose', sans-serif;
    &:before {
        content: @fa-var-bullseye; // font-awesome's bullet icon
        .fa; // calling font-awesome's class. DOESN'T COMPILE
    }
}

The problem is that .fa class is declared like this in font-awesome LESS sources: .@{fa-css-prefix} { ... }, so the code above doesn't compile. I tried to reuse the .fa code like this:

&:before {
    content: @fa-var-bullseye; // font-awesome's bullet icon
    .@{fa-css-prefix}; // DOESN'T COMPILE
}

and like this:

&:before:extend(.@{fa-css-prefix}) { // compiles but no effect
    content: @fa-var-bullseye; // font-awesome's bullet icon
}

I know I can just change my html like this <h1 class="bulleted-header"><span class = "fa fa-bullseye"></span>Hello</h1> and not to use :before at all, but it's more logical to keep all this bullets thing in CSS.

I ended up just copy-pasting the content of .fa into my :before, but there is something wrong in this approach because now I have to maintain this code myself in case FA guys change something. Are there any more elegant solutions?

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.