Can't get Font Awesome Duotones to work

When I paste a glyph from Font Awesome Duotone font, I only get half of the Duotone to show; the part with 40% opacity does not show at all.

Do I have to add som custom css for the duotone fonts to show?


Here is my site Read-Only.

1 Like

I haven’t tried using DT yet, but looking at your example I got it by a weird way of doing this.
Although, putting font awesome into webflow is weird in general.

Basically, I discovered that in Font Awesome DuoTones, there are actually TWO glyphs.
Here’s what I did:
• Duplicated your text block
• Changed the second text block to the second glyph
• Gave it a subclass of FAD TWO
• Made that second class/second glyph 40%
• Made the parent class of FA-font-duotone Position: Absolute.

1 Like

Thank you for that workaround, really appreciate it. But isnt it weird that it’s neccessary to duplicate it?

My use case is to fetch duotone icons via CMS-collection item. There is no way I can get client to paste the icon twice in different fields :frowning:

1 Like

Ok, you were right. The “Glyph” way is really to do just that. The better way, which si to use the tags such as <i class="fad fa-acorn"></i>, works like charm for both opacities, however, I cannot seem to get code from CMS collection items. Not even the plain text field for the collection.

How WEIRD is that…