Add Icon Fonts (Font Awesome, etc)

Community resources Product feedback
1

I know this requires inline elements, which you don’t have support for yet (yes, please), but this would really save a lot of time post export. I know you guys are probably already working on this. You guys are doing an amazing job, keep it up!

2 Likes
2

I agree too!
This is really important as it is really detrimental towards time and workflow to have to bust out photoshop to make the icon font an image and then upload it.
It works better for responsiveness too when you can do it in webflow!

ASAP please :slight_smile: lol

3

@Tim_Macchi and @sparkzweb we totally agree it would make the workflow so much faster. We’re trying to figure out a good solution for icons. SVG’s are awesome. Font icons are awesome as well, but they have their problems. We’re looking into it!

Thanks for your patience guys :slight_smile:

4

As a work around for this, it doesn’t work in preview, but does when exporting.

Put your font files on a server somewhere, and use the custom code section of the site settings. e.g.

<style type="text/css">
@font-face {
    font-family: 'icon-name';
    src: url('http://path-to-file.eot');
    src: url('http://path-to-file.eot?#iefix') format('embedded-opentype'),
         url('http://path-to-file.woff') format('woff'),
         url('http://path-to-file.ttf') format('truetype'),
         url('http://path-to-file.svg#cc-icons-1medium') format('svg');
    font-weight: normal;
    font-style: normal;

}
.cc-icon {font-family: 'icon-name', Arial, sans-serif; }

Then paste the unicode characters in to see them in the preview, and the replaced characters will show when published.

Some characters are being stripped out past unicode 12000 though, not sure what the issue is.

1 Like
5

+1 for this feature request. It would be loverly, indeed :slight_smile:

6

You can find font awesome SVG files (in black AND white versions) here GitHub - Rush/Font-Awesome-SVG-PNG: Font Awesome split to individual SVG and PNG files of different sizes along with Node.JS based generator

@thesergie
update: but there is a strange issue with these SVG files when I try to import them in webflow (probably related to the header or something else in the file format). When I open the files (without any troubles) in Sketch App and save them again as SVG, its ok …

7

The full pack (svg + png) from here Font Awesome Icon Pack | Fill | +365 .SVG Icons seems ok (but only black is provided) !
Enjoy.

8

Thanks for the resource @earnoud! That’s odd that it’s not working. The creator must have exported the SVG’s incorrectly. A re-export from AI or Sketch should reset the SVG to defaults values.