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
    26 Jul, 2021 09:37am

    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
    30 Jul, 2020 10:17am

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

  • Ashley Lombart commented
    30 Apr, 2020 01:43pm

    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
    30 Apr, 2020 01:36pm

    That is a great idea

  • Jacob Wright commented
    22 Jan, 2019 10:35pm

    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
    21 Oct, 2018 03:18pm

    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
    30 May, 2018 12:37pm

    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
    8 Mar, 2018 04:34am

    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
    17 Aug, 2017 10:27pm

    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
    10 May, 2017 06:21pm

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


    Hope this helps.

  • VanNoppen Marketing commented
    9 Feb, 2017 06:12pm

    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
    8 Feb, 2017 07:47am

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

  • Christoph Wisotzki commented
    27 Jan, 2017 08:52am

    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
    23 Jan, 2017 09:33pm

    This is quite critical for speeding up web design!

  • Sergie Magdalin commented
    18 Jan, 2017 11:19pm

    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