Font Awesome via embed?

Publishing help General
1

Hi guys,

Is it feasible to use Font Awesome icons (in the font format, not svg) via the embed widget, or has anyone achieved this?

Many thanks

6

Hey guys, icon fonts can be implemented now using custom fonts.

  1. Add Font Awesome font files in site settings > fonts.
  2. In any text element select a letter and make it a span.
  3. Give that span a class and change the font family to Font Awesome.
  4. Find reference for corresponding fonts on their website and paste it into the span.
  5. BOOM. Increase size, change color, etc.

Beware - Font Awesome is 400kb or bigger. Create your own Font Icons using Icomoon for optimized option.

3 Likes
7

Still having problems implementing what looks to very easy. It seems like a wrong character is being embedded, but Iā€™m not sure what to do about it.

https://webflow.com/design/ballseed?preview=741c841678adbde5c833b5d4b3c29ce2

8

Hi @Kirk,

If you are using a text span to show the icon, which is a one way to do it, then you can do the following:

  1. Select some text that will be an iconā€¦ then click the Wrap with Span button. Next give that new Text Span a class name, like ā€œbutton iconā€ or something.

  2. Copy one of the unicode font awesome icon values from the font awesome cheatsheet at http://fortawesome.github.io/Font-Awesome/cheatsheet/ and paste that into your text span and replace the text that was there before.

  3. Select your class ā€œbutton iconā€ that you created and set the font to Fontawesome Webfont.

Now at this point the font awesome icon should be showing. If it is not, then check your site settings in the font panel, and check to make sure your fontawesome fonts show up as installed in the Custom Fonts list of installed fonts.

Check those, then see if you still have issues. Cheers. Dave

have you copied the code from the font awesome cheatsheet into your text span, and have you specified that the font for that

1 Like
9

Dave, look at this link:

https://webflow.com/design/elementtesting?preview=0a3bf479dddf4e9f0dd5050856e38b22

I went to Fontello to get the Fontawesome pack and selected my fonts including ā€œicon-eyeā€. The demo.html from the download shows up correctly in my browser.

Then, I used the Fontawesome cheat sheet to copy the icon. I then set a span with the class ā€œfontawesomeā€ which points to the Fontello font family. However, at this point all it shows is a blank spot.

I did notice that the Fontello download does not create an OTF format.

10

Hi, you should download the the complete set of fontawesome files from fontawesome.io and upload all the fonts in the Fonts subdirectory to Webflow after you extract the zip file. Maybe the files from Fontello are probably ok, but I would just get these from the fontawesome page.

When you put the code into the text field, the fontawesome icon should show immediately in your designer view. If you are going to use a css approach, then fontawesome font will not be loaded until after you publish your site.

Once you have the fontawesome font uploaded to your site, then you copy the code from their cheatsheet for the icon you want to use:

The code you want to copy from this sheet as an exampl, is the unicode version of the icon, so for example the fa-apple class icon would be unicode string:



I would have to check, what are instructions using Fontelloā€¦ I will check thatā€¦and report what I find, unless someone else on the forum is using Fontello sourced fontawesome filesā€¦

1 Like
11

Dave, thanks for the help.

Indeed, you were correct. It worked fine using the complete font download from Fontawesome. I was hoping there may be a way to avoid using the complete set. I donā€™t think I had success using icomoon.io either.

Hope you guys can work on this some more.

Loving WebFlow so far. My only other request is to move beyond the 940 width soon.

12

@Kirk, thanks for the update. Probably there will be some updates with this in the future once some other high priority features are rolled out firstā€¦ We will take a look at this more. Same thing on the 940 grid, there may be changes in the future for this too, but no ETA when our grid system will be updated to something new. We appreciate your patience.

13

Hi, Just looking for a quick update. Is it best to still upload font awesome files or is it better to us Font Awesome CDN embed code for better performance?