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?

possible duplicate of [LESS mixin a variable class name](http://stackoverflow.com/questions/19602812/less-mixin-a-variable-class-name) — chipairon, Apr 23 '14 at 12:50

score 11 · Answer 1 · edited Jun 20 '20 at 09:12

11

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 05 '13 at 08:53

Martin Turjak

20,896
5
56
76

Don't forget to add the `font-family: FontAwesome;` if you are manually inserting things like `content: "\f140";`. – Giel Berkers Jul 04 '14 at 20:40
2

@ratata it is the the escaped hex representation of the character and in this case it is an extension of the unicode set. In html a hex value representation looks like this `;` , but In CSS you use just the escaped hex value `\`. You can use the hex representation of any unicode character in the same manner (see a simple [jsfiddle](http://jsfiddle.net/mturjak/te55k46r/)). Most ASCII/Unicode character tables will also list the hex codes. Here is the font awesome cheat sheet with all the codes (in their html form): http://fortawesome.github.io/Font-Awesome/cheatsheet/ – Martin Turjak Feb 03 '15 at 00:44
1

Also with gulp-less I've had to use @import (less) 'font-awesome.css'; – Whisher Jul 29 '15 at 15:40

score 0 · Answer 2 · answered Dec 05 '13 at 08:11

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.

LESS: using font-awesome in :before

2 Answers2

Update:

Linked