sass - Fontawesome icon not showing via CSS

Question

I create css class like below:

.multi-dot-dropdown.dropdown-toggle::after {
    border: none;
    font-family: "Font Awesome 5 Duotone";
    content: "f141";
    vertical-align: 0;
}

why when i try to use this class in my bootstrap dropdown, then it show me only:

instead of coorect icon?

thanks for any help

Answer 1

When using the duotone icons you need font-weight:900 among other steps listed in the documentation

Using CSS pseudo-elements to render duotone icons follows a similar setup, but requires the use of both the ::before and ::after pseudo-elements along with more styling setup.

Define Common CSS for Duotone Icons There are shared CSS properties, which are unique to the duotone style, that all duotone icons will need. Again, it’s best to get this out of the way first in your CSS so that your icon definitions become simple.

1. Add styling to element that will contain the pseudo-element to support positioning.
2. Set the font-family to Font Awesome 5 Duotone, the font-weight to 900, and add positioning styles for the pseudo-element.
3. Set the default opacity levels and colors for each layer of the duotone icon.

You can follow the example listed there too (I cannot add one here as it requires a PRO licence)