I have several questions but really a variation of the one issue that I’m having with webflow.
Simply put I’m trying to use some kind of icon set in my design. Would love to use FontAwesome or Bootstrap icons but I’m not opposed to others. However it seems like this is currently not possible? Unless I’m missing something?
What good is a UI designer if I can’t implement simple icons or a horizontal rule for example? Webflow doesn’t seem to allow access to the css file to manually do stuff like this…true?
I just want to make sure I’m not missing something here…any feedback or workarounds would be appreciated. Love the product.
Hi @bpark73. We’re planning on building in Font Icons and adding a horizontal rule. The reason we haven’t added font icons is because it’s not so easy. We want to get it right so that they’re easy to work with. Technically font icons are inline elements and we don’t have support for inline elements as of yet (having it inside other text blocks). But we are actively working on it.
We want to be give you guys the ability to add icons inline (while editing text) and as a block (drop it anywhere in your site). Which one of these would you use more?
As for the horizontal rule, a workaround is to give the bottom of an element a solid border. Add some bottom padding to the element to give it space. This isn’t ideal if you want a separate element for the horizontal rule, but it will work great visually. A workaround for the icons is uploading png’s.
I also agree that using font-awesome or a built in function would be tremendous! I’m looking forward to this greatly. for a horizontal rule, i generally do what @thesergie says and apply a border, especially if I’m customizing a table or something of that nature.
What about the custom code section? If it’s possible to “add” a table in custom code, is it possible to add a small line of custom code to an element to add an icon? then before exporting or even while still designing you could put the link/ref in the head in the custom code section? I’m not sure if this would work, I’m just spit-balling here.
Again, the added functionality will be brilliant, and I’m so happy the guys @webflowapp are so forward thinking.
Otherwise, a last resort is to simply upload custom .png’s @2x
Ah shucks Sergie. I feel stupid, but I can’t seem to figure it out. Would it be possible for you post a link of an example or make a quick example and post it so I could take a look? Thanks. This is one of those things I need to conquer before I can move on.
You don’t have to mess with the custom attributes section. All you have to do after you create a span in your text element is paste the icon into that span (using copy paste). You can copy the icon from the Font Awesome website and then paste it into your text element.
Going to IcoMoon is a really great idea to simplify your icon font set to what you want specifically! I’d never heard of it.
Anyway, I had some confusion about how to include these into webflow. In following the directions by theserge, there is one thing to note.
When you go to the fontawesome website to highlight, right click & copy your icon go to the [cheatsheet page][1]. Not [the icons][2] page because from here you can’t do those steps. That is where I got some confusion as to serge meant by that.
