XF 2.3 Font Awesome icons in CSS with 2.3

[Mr Lucky]

You will need to look into how we add icons to templates and use that approach,

Is there any documentation available on this, especially re using in CSS?

For example previously I add category icons using before pseudo elements in extra.less:

.block.block--category.block--category28 .block-header:before {
    .m-faBase();
    content: '\f001';
    float: left;
    padding-right: 5px;
}

How would I do that now?

 

[Chris D]

The key here is to use these @fa-var-x variables. This enables our icon analyzer to detect the usage and make the correct icon available:

.block.block--category.block--category28 .block-header:before {
    .m-faContent(@fa-var-music);
    float: left;
    padding-right: 5px;
}

You no longer need the .m-faBase() call.

The icon variable is just based on the FA5 Pro name of the icon. So fa-music is @fa-var-music and fa-arrow-circle-up is @fa-var-arrow-circle-up.