I’ve got my FA Woff2 Custom Fonts all loaded. And tried various ways to get it to work, but nothing. The only way it does work is in Html embed, but that’s not very useful as I can’t put that inside a button (as far as I know).
The biggest issue seems to be that I can’t cut and paste, as this has been disabled by WF!
it seems to work if you go to font awesome’s website and copy & paste the Unicode Glyph.
For example; I saw that you had the “chevron-down” icon somewhere on the page, so I went to font awesome’s website, copy & pasted the unicode into the text block, and changed the font in Webflow from “Fa 400” to “Fa Solid 900”. It seems to work great.
I’m not 100% sure what you mean about being unable to cut & paste, but it seems to be working great from my end.
Wow. OK. That was way too much like hard work. Why does it only work with FA 900? Why doesn’t anyone say that anywhere???
So great, I can now copy and paste the glyphs from the Cheatsheet. And they take on the style as appropriate, so colour etc.
Also, just as I’m playing with this, I can see that the font on the Developer mode changes the text, but when it’s live it shows the correct font. All extremely confusing! And yes, it’s the actual glyph that I needed to copy and paste, not the code.
I wish @Webflow would gather this kind of info and put it somewhere in one useful place, instead of having to try and piece things together from four years forums.
If you look at all the potential options available with FA and the resulting documentation, plus constant changes, that would be a big undertaking. Pro, not pro, JS or not, svg replacement, etc…
I will look at adding a simple tutorial to my work queue that I can share with the community. If someone already has one, please share it.
@webdev
I Absolutely see the issues around this, but having a basic walk through of a simple solution would at least get people started and then they could learn more and branch out from there.
My problem is that although I have a “working solution” I’m not completely sure how I go there, spent a day on false starts and failures and was getting very frustrated with how impossible it felt. Especially with things like the FA font changing the look of the text in the Heading, but actually it was fine when you look at preview.
I’ll try and go back over the steps I took (and some pitfalls to avoid) and make some notes to share.
There is always the option of downloading only the SVG assets you need for the project, then adding them to the assets. Then you can use them whenever you need. Nice part about that approach is it is lean. No scripts, or external css to add to your site. Zero Custom Code.
@webdev
That’s true, but I’m playing with making an accordion where the chevron rotates 180 degrees and changes colour. Could be done with two icons, but hey… we have the technology…
Just curious if you solved this, Jonathan. You could probably add an animation for the rotation. I’m about to attempt @webdev’s SVG recommendation since I’ve been struggling to get Font Awesome to work well along side a text box.
