Streaming live at 10am (PST)

Using icons - FontAwesome/Bootstrap...etc


#1

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.

thank you


#2

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.


#3

Any progress on this? is there a way to manually enter the


#4

Sorry it looks like you got cut off. wink


#5

Sorry .. I am looking for a way to add icons. Is there a way to manually edit the html to add raw html into it? or have icons been added?


#6

Oh ok. Icons have not been added yet. Right now you can only add your own HTML if you export.


#7

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


#8

answered in another thread:

http://forum.webflow.com/t/font-awesome-via-embed/1819/2?u=pixelgeek

#9

Definitely am looking to be able to import icon fonts! Can't wait for this feature! Any timeline on it?


#10

im having issues creating hover effects for my font awesome icons.

i have to hover at the very top of the icon before it changes state.

Here is my preview link

https://webflow.com/design/yspn?preview=c31623cba9a26902a725e34bea2d6b0d

please scroll right to the bottom.

thanks


#11
  1. remove the classes from your link blocks
  2. add a div inside your link and place those classes in there
  3. done =)


#12

hi @PixelGeek

unfortunately it didnt work. followed your instructions but its still doing the same thing. any other ideas?


#13

UPDATE: You can now upload custom fonts including Icon fonts, and then access them in the designer.

  1. Add icon font in site settings > fonts.
  2. Highlight text and make it a span.
  3. Give it a class and change to Font icon font family.
  4. Find reference for the icon you want at font awesome and paste it into Webflow designer.

#14

Oh oh... So close. I just missed the part about where I am placing the reference of the icon I want to use. Could you please show an example?

Thanks!


#15

Font awesome has a reference guide on their website. Copy the icon from there and paste it into Webflow (into your span that you created).


#16

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.


#17

Hey @adn what part are you getting stuck on?


#18

I guess where or what to put in the span custom attributes section in the right hand panel, webflow designer? Name? Value? Nothing is working for me.

EDIT: And that would be for example <i class="fa fa-lock"></i>

https://webflow.com/design/fontawesomedemo?preview=f22a6bfa1bff034219687a91726e22f6


#19

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.


#20

Hi,

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. Not the icons page because from here you can't do those steps. That is where I got some confusion as to serge meant by that.

I believe the font awesome icon must be included in your set if you chose to use icomoon. Make sure you add fontawesome from the icon library if it isn't already there in icomoon.