It would be great to be able to add in a custom font library or Font Awesome and be able to drag the individual icons over like any other element and then style with CSS font properties.
I think "be able to drag the individual icons over like any other element and then style with CSS font properties" can be done without icon fonts. We can use normal inline SVG's with "currentColor" as the fill color and it will take the color from font styles. More info on SVG currentColor on the forums. Way cleaner and simpler than font icons and this allows icons to behave more like images, which makes more sense than inline text that requires a special reference sheets to get the right icon.
This is quite critical for speeding up web design!
You can already do that... Just upload the fontawesome font & use the fontawesome cheatsheet to copy and paste your items. No need to integrate that into webflow.
Yeah, this is already built into Webflow like Christoph Wisotzki said.
Adding a library of icons to the "Elements" panel, that can be used (dragged and dropped) right out of the gates without having to manually add a font library yourself or add/upload individual icons as images, is a must. One of Webflow's competitors, Froont (https://froont.com/) incorporates a large and customizable icon library nicely in their designer, it would make sense for Webflow to add it as well.
I've made a video about how to add FontAwesome to Webflow
Hope this helps.
Claudiu Limban, Thanks so much for taking the time out to show how to correctly use font-awesome with webflow! Very much appreciated.
I have to agree with this request. I am a seasoned developer and have tried over and over to get Google Material Icon set to work in webflow to literally no avail. I've tried uploading the actual font files, and even referencing Google Web Fonts via the html approach. Zilch. All i get is a square where the icon should be.
Honestly guys, if there can be a font selector in the designer, there's no real reason there couldn't be an equally functional icon selector in a similar panel. This is pretty fundamental stuff. And yes, there are potential workarounds (none of which have worked for Google Material Icons) but Webflow's whole value prop is taking the technical pains out of development. Let's get a proper icon selector guys.
Or, in the very least, make it less painful to change the color of an SVG. I should be able to click the SVG, click the color panel and select my hex/swatch. Boom. Sexy.
Do it! :)
Hey really, that should be as easy as adding a Font from Google Fonts. We need this for all kind of call to actions =)
I also would like to see a more user-friendly means of adding icon fonts. I have literally spent a few hours trying to get Font Awesome to work with Webflow to no avail. I have followed every tutorial I could find (including one mentioned in this thread) and nothing works.
This should not be that difficult.
What's more -- whatever solution exists should allow us to use the <i> tag or <span> along so that we can take advantage of helper classes.
Google's Material Icons set is on their font hosting (https://fonts.googleapis.com/icon?family=Material+Icons). Could that at least get added to the dropdown list of Google fonts?
You won't be notified about changes to this idea.