Font Awesome now has a long awaited DuoTone in their collection.
I think now is a good time to have a straightforward way to manipulate fa icons the way you would with regular markup and html.
I’ve been using the legacy version of - goto the site, copy the glyph, add it to the text widget, give it the class of FA to assign the font awesome font I uploaded to the site.
This is a pain as everytime they update their font set, I have to reinstall the font.
Using their standard js package would be a lot better.
Not native, but a workaround. If you use the svg/js settings you can use the new duotones by setting a standard class on an empty span container. You wont be able to see the icon in the designer, but it works.
I’m setting a generic character (arrows, etc) in the container to add styles and any animation and then replacing the character with a non-breaking space when it’s ready.
You change the color by setting the text color on the container and the size by the font size. Extra, but works like a charm.
Not really hard, just a bit of workaround. The main thing being - best way to integrate is to load it up via their javascript integration and then place the icons via tags.
The best workaround for webflow is to install FA as a font and then paste the glyph in and assign a class for the font to Font Awesome.
The problem with this workaround is that you CONSTANTLY have to re-install the fonts as they update their icon set PLUS getting the glyph isn’t straightforward. You need to goto their website and get the glyph, copy it, then paste it into webflow.
Otherwise it would be a simple would produce the unicorn icon.
If you drop in an HTML element and do it this way with the javascript loaded up, it won’t show the icon, nor will it show any styling you’ve added to the icon. So it’s tough to visually design this in webflow.
Again - its done, just workarounds in a visual editor…
I’m having a hard time getting the new DuoTones to work. Seems like you guys have figured it out, would you mind taking a look to see if you can see my problem?