Easily add and style icons (e.g. Font Awesome)

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.

  • Stephen Johnson
  • Jan 17 2017
  • In backlog
  • Sergie Magdalin commented
    January 18, 2017 23:19

    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. 

  • Gabriel Brodersen commented
    January 23, 2017 21:33

    This is quite critical for speeding up web design!

  • Christoph Wisotzki commented
    January 27, 2017 08:52

    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.

  • Nathaniel Perales commented
    February 08, 2017 07:47

    Yeah, this is already built into Webflow like Christoph Wisotzki said.

  • VanNoppen Marketing commented
    February 09, 2017 18:12

    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.

  • Claudiu Limban commented
    May 10, 2017 18:21

    I've made a video about how to add FontAwesome to Webflow

    https://www.youtube.com/watch?v=1OCRUXPvDMI

    Hope this helps.

  • Cameron Wethal commented
    August 17, 2017 22:27

    Claudiu Limban, Thanks so much for taking the time out to show how to correctly use font-awesome with webflow! Very much appreciated.

  • Thaddeus Kilo commented
    March 08, 2018 04:34

    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! :)

  • PS Werbung commented
    May 30, 2018 12:37

    Hey really, that should be as easy as adding a Font from Google Fonts. We need this for all kind of call to actions =)

  • Moshe Morris commented
    October 21, 2018 15:18

    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.

  • Jacob Wright commented
    22 Jan 22:35

    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?