Font Awesome Widget Library for RP 8 (Icon Fonts)


#1

11/27/2018 Axure staff edit:

We’ve built a widget library for version 5.5.0 of Font Awesome icons.

Please note that version 5 differs not only in icons, but in formatting and categories, so if you have version 4.7 of Font Awesome installed, make sure to install version 5, as the font files are entirely separate. It’s also worth noting that Font Awesome has updated their toolkit a few times since this original post. So, different versions of their CSS and font files could be floating around, which may be incompatible with the specific widget library provided in the original post. Using consistent versions across these three components (RPLIB, FA font file, and CSS link) would be ideal. You can find the most recent version of Font Awesome assets below.

And here are the steps:

1. Download and install version 5.5.0 version of the Font Awesome 5 font file.

https://use.fontawesome.com/releases/v5.5.0/fontawesome-free-5.5.0-desktop.zip

Open the “otfs” folder, and install the three “Font Awesome 5 Brands-Regular-400.otf”, “Font Awesome 5 Free-Regular-400.otf”, and “Font Awesome 5 Free-Solid-900.otf” font files.

2. Restart Axure RP.

If Axure RP is open, shut it down completely and re-open it. This will allow you to choose “Font Awesome 5 Free/Brands” from the font droplist and see the correct icon in the editor.

3. Go to “Publish > Generate HTML Files” and add the Font Awesome CSS link in the “Web Fonts” tab:

https://use.fontawesome.com/releases/v5.5.0/css/all.css

4. Download the Axure Font Awesome V5.5.0 widget library, and load it into Axure RP via hamburger menu > “Load Library”.

FontAwesomeV5.5.0.rplib (10.2 MB)

Alternatively, you can copy & paste the icons from the FontAwesome official cheat sheet.

5. Drag and drop Font Awesome widgets from this library.

Note: Version 5 of Font Awesome icons are adjusted using widget size and fill color.


8/11/2017 Axure staff edit:

The attached custom widget library includes version 4.7 of Font Awesome icons.

1. Download and install version 4.7 of the Font Awesome font file.

https://fontawesome.com/v4.7.0/assets/font-awesome-4.7.0.zip

Open the “fonts” folder, and install both the “fontawesome-webfont.ttf” and “fontawesome.otf” font files.

2. Restart Axure RP.

If Axure RP is open, shut it down completely and re-open it. This will allow you to choose “FontAwesome” from the font droplist and see the correct icon in the editor.

3. Go to “Publish > Generate HTML Files” and add the Font Awesome CSS link in the “Web Fonts” tab:

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

4. Download the Axure Font Awesome V4.7 widget library and load it into Axure RP via hamburger menu > “Load Library”.

FontAwesomeV4.7.rplib (6.61 MB)

Alternatively, you can copy & paste the icons from the Font Awesome official cheat sheet.

5. Drag and drop Font Awesome widgets from this library.

Note: Version 4 of Font Awesome icons are adjusted using font size and font color.


How to use glyphicon in axure
Generator widget Axure 8
Problem with Font awesome
Need help... its Font Awesome 5
IMPORTANT ! Sharing project with custom FONTS for client
#2

Quick tip for those hosting their axure prototype on dropbox. The dropbox public link uses ‘https’ protocol. The font-awesome icons in my prototype were being displayed as boxes in the latest version of firefox (23.0.1).

Looking through the console in firebug, I had the following error:-
Blocked loading mixed active content “http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css

Active content? What’s all that about I wondered. Good post here.

I also spotted a shield icon next to the url bar in the browser. This is what led me to the work around.

I removed the ‘http:’ protocol from the ‘Font Awesome CSS’ link //netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css, and generated the prototype files again. Copied them to dropbox and all was good.

HTH


#3

this is life changing!
Seriously. I find this helpful in so many ways. Saving tons of time working with other sources outside of Axure.


#4

agree with Doron…font embedding in order to use Font Awesome is a TERRIFIC feature for axure, thanks all!


#5

I’m excited to try this out but the ZIP file seems to have gone AWOL. Is it still necessary?


#6

I’ve updated the link, it looks like there’s a 4.x version out now but it’s not too much different than this version.


#7

Hey Paul, Have you updated this to 4.0 yet? This is amazing! Total game changer for me.


#8

Hey jwex, I have not, it’s possible that I will. From what I gather 4.0 is great if you are indeed coding, because you can use all the little custom variations like fill, circle, square… but because there’s so many of these variations, I don’t think it’s really scalable for Axure. If you care to change my mind I would be all ears!


#9

Well, i am loving the stuff you have put up already so i am very happy. Thanks again!


#10

Brilliant feature!

However, I’m having a little bit of trouble getting the icons to align properly using the align controls in Axure. They seem to be a bit off centre, and they render in different positions in different browsers.

Converting them to images fixes it, but you do lose a bit of flexibility.


#11

This is a great tool and I’m stoked to find it!

Just wanted to raise a little flag though- I added into to the new axure version Ver. 7.0.0.3145 (which is currently a beta update) and I couldn’t get the file to publish to axshare afterwards.
I closed to file, thinking it was an issue with axure or the net, but then couldn’t get the file to open again.

Was able to recover my file to the stage before I’d added this library into it. All versions after I’d added this rplib wouldn’t open.

I’m going to try fiddling with this again and will post an update because god knows
we need good looking stuff like this in axure wireframes!

Hope this is helpful.


#12

Hi Paul, Thanks for the icon font. I was wondering how to added the individual icons into the text box? What key -or- key sequence are you punching in in order to have a specific icon shown up in a text box.

Thanks for help.
MO


#13

Hi Marc - I think your best bet would just be to copy/paste from FA’s icon list Font Awesome Icons.


#14

Hi Marc,

I use the Widget Library here. When you install it, it creates a new, searchable library with all of the icons as individual widgets. Very handy!

http://www.axure.com/forum/attachments/tips-tricks-examples/2944d1387436188-font-awesome-widget-library-v7-icon-fonts-fontawesomev321.rplib


#15

Hey Paul,

First, let me compliment you on the library. Yet another useful resources for us, prototypers :slight_smile: I have been playing with FontAwesome (referred to as FA) for couple of days and have a few quick questions (rather requests for confirmation hehe):

  1. As hellomarcoliver pointed out, the FA characters appears to not map to hard keys. Is it safe to assume then that the character set does not map to alphanumeric keys and instead has to be copied from the page you pointed out character at a time?

My testing of FA (both as .ttf and .otf on PC/Apple) shows that the character set is a separate namespace (for the lack of better word). I was initially working under the impression that it maps to physical keys like Webdings.

  1. Why are we pointing to the .css file in the Generations Settings Web Fonts section?

My assumption is that the font or fonts used in a prototype don’t get stored in the prototype as an asset, thus a translation is needed if the prototype is viewed on a machine which does not have the font installed locally. Let me know if this is a correct interpretation.

Thanks in advance for any input you may have.

light_forger


#16

Hi Svet- I’ll do my best here and anyone is welcome to chime in and correct me.

  1. I am not really 100% about if Font Awesome ever mapped like wingdings. I know that when coded it’s something like <i class=“fa fa-camera-retro”></i> more info Font Awesome Examples

  2. The css file works basically like a webfont. You and I have FA installed, but because most people don’t it wouldn’t render, and that’s where the css comes in.


#17

Paul,

As always, thanks for the quick and helpful response.

  1. Yeah, now I don’t think so either. After all there are more than 361 icons hehe. I browsed the examples and really dig the rotation and sizing via CSS classes.

  2. After my post, I tested this by accessing an FA proto on a system without the font, and it proved my hypothesis.

Furthermore, I believe my initial mental model was incorrect. I thought a user didn’t need the appropriate font locally to author any work e.g., he/she could use any font such as ‘Arial’ and then pass a mapping to say ‘Font Awesome’. During runtime the entered text would convert to FA. That is the mapping required the web font only.

Testing shows that one does indeed need the local font. Am I understanding this last puzzle piece right?

light_forger


#18

You definitely shouldn’t need Font Awesome installed to author work using it (not sure I would suggest that workflow though :slight_smile: ).

Here is a sample I created with Font Awesome disabled. I used the library FontAwesomeV321 attached earlier by Paj. This sets the Font on the Widget directly to FontAwesome (rather than creating a Web Mapping) and then creates a CSS Web Font pointing to: http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css.

Font Awesome Test

Here is what those icons looked like for me locally:

That library is very nice because you don’t have to worry about getting the character in. However, copying and pasting or using the Alt Key Codes should work as well.


#19

Ian, this definitely helps. Now I know that web fonts help display text used in a prototype to an end user using a different font, either existing local font on end user’s machine or via rendition of an externally hosted font.

I started my investigation from the viewpoint of the Designer and how fonts display locally in the prototype. Hence my assumption that Font Awesome needs to be installed: to provide clarity to the gibberish icons above locally, despite these showing fine during runtime of the prototype. How else would a Designer what glyph he or she used hehe?

I took this local view of Web Font prototyping and thought it relates to the external rendition, which it appears to not be the case: the web font mapping gets completed regardless if the appropriate font is used or not. The only thing the Designer needs to do to ensure this, is set the text labels to the web font (as stated in the other thread) or paste the glyphs from a cheatsheet similar to Font Awesome.

It took me a while to figure out that the glyphs don’t map 1 to 1 on keyboard keys since there is more than 360 of them, so the cheatsheet is a necessity.

light_forger


#20

Ian, Lennart Hennig’s new “Axure for Mobile” book (7.0 edition) beautifully explains what I had to learn the hard way about Web Fonts, hehe: Amazon.com: Axure for Mobile, Second Edition: Building Mobile Prototypes with Axure RP 7.0 eBook: Lennart Hennigs: Kindle Store

This read would have saved me much research earlier :slight_smile:

light_forger