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.

 

[Deleted member 184953]

Hello, how to set icons to solid, regular or light ?

 

[Deleted member 184953]

Found it
.m-faContent(@fa-var-solid-music);

 

[PASS]

How do you use duotone?

 

[Deleted member 184953]

.m-faIcon(@fa-var-duotone-music);

 

[Joe Link]

.m-faIcon(@fa-var-duotone-music);

@Chris D

How do you specify primary and secondary colors when calling a duotone icon via CSS? class="fa-secondary" doesn't seem to get added unless the icon is added via <xf:fa icon="fa-music">. I'm trying to add icons to group banners but I can't seem to figure this out.