Building a custom Sass file + Duotone icons

[tiesont]

Hello there!

I'm not sure if this has been covered before, but I found myself stumped for a while in trying to get FA6's duotone icons to work when building up my own fontawesome.css file from the available Sass files. FA5 works, using the exact same process, though.

Basically, I don't use the brand icons or the light icons, so I just build up what I need, like so (this is in an ASP.NET6 project, if you're curious):

$fa-font-path: "/lib/fontawesome/webfonts" !default;

@import '../lib/fontawesome/scss/fontawesome.scss';
@import '../lib/fontawesome/scss/regular.scss';
@import '../lib/fontawesome/scss/solid.scss';
@import '../lib/fontawesome/scss/duotone.scss';

I don't get any errors, but the duotone icons would never display correctly, and the various examples of customizing the primary and secondary colors wouldn't apply the relevant styles. Just weird, offset glyphs from the primary layer (from what I could tell).

On a hunch, I noticed that the /scss directory (in the downloaded archive) contains a file I don't recall seeing in FA5, _duotone-icons.scss. This file is not referenced in fontawesome.scss, which seems to load every other "utility" Sass file:

@import 'functions';
@import 'variables';
@import 'mixins';
@import 'core';
@import 'sizing';
@import 'fixed-width';
@import 'list';
@import 'bordered-pulled';
@import 'animated';
@import 'rotated-flipped';
@import 'stacked';
@import 'icons';
@import 'screen-reader';

If I add duotone-icons to these imports, so that it looks like this:

@import 'functions';
@import 'variables';
@import 'mixins';
@import 'core';
@import 'sizing';
@import 'fixed-width';
@import 'list';
@import 'bordered-pulled';
@import 'animated';
@import 'rotated-flipped';
@import 'stacked';
@import 'icons';
@import 'screen-reader';
@import 'duotone-icons';

...BOOM! duotone icons start working as expected! Yeah!

Hopefully this helps someone else, but feel free to delete if it's covered somewhere or is just too rambling.

[tagliala]

Moved to #19782

[tagliala]

Hi @tiesont , this behavior is documented:

https://fontawesome.com/v6/docs/web/use-with/scss#using-duotone-icons

[tiesont]

Awesome. I must have missed this. Thanks for the reference!