Streaming live at 10am (PST)

Add Icon Fonts (Font Awesome, etc)


#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

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


#5

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


#6

You can find font awesome SVG files (in black AND white versions) here https://github.com/CodeCharmLtd/Font-Awesome-SVG-PNG

@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 http://www.flaticon.com/packs/font-awesome/ 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.


#9