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
  • Reviewed
  • Glamorous Ninja commented
    July 26, 2021 09:37

    there can be a text style selector in the creator, there's no genuine explanation there couldn't be a similarly utilitarian symbol selector in a comparable board. This is quite crucial stuff. What's more, indeed, there are potential workarounds (none of which have worked for Google Material Icons) however Webflow's entire worth prop is going to considerable lengths out of improvement. How about we get a legitimate symbol selector folks.

  • Alex Dixon commented
    July 30, 2020 10:17

    +1 It would be very useful if Font Awesome had a supported integration with Webflow.

  • Ashley Lombart commented
    April 30, 2020 13:43

    I have been in web designing field from last 3 years and web flow community helps me a lot, can anybody tell me can do no human verification for comments on some specific pages.

  • Ashley Lombart commented
    April 30, 2020 13:36

    That is a great idea

  • Jacob Wright commented
    January 22, 2019 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?

  • 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.

  • 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 =)

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

  • 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.

  • 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.

  • 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.

  • Nathaniel Perales commented
    February 08, 2017 07:47

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

  • 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.

  • Gabriel Brodersen commented
    January 23, 2017 21:33

    This is quite critical for speeding up web design!

  • 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. 

  • +299