Font Awesome Widget Library for RP 8 (Icon Fonts)

[Paj]

Using the FA Widget Library is very, very good. You don’t need to worry about key mappings or anything, and the library is searchable so you can quickly find what you’re looking for. Then just drag and drop.

To ensure it works everywhere, make sure you include the following web font link in the Generate HTML > Web Fonts dialog box:

http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css

This will load the FA glyphs correctly, regardless of whether the user has the FA font files installed on their local machine.

[zimbeta]

Hello all. New to the forum here so my apologies if I am overlooking something obvious but I cannot see any option on my version of Axure (7.0) that would allow me to add “Web Fonts”

As you can see on my screen when I click Generate Specification there is no option for Web Fonts as you seem to have. Has something changed? Am I in the wrong version? Thanks for any help.

By the way I can see the icons when I publish locally but not on another computer, they are showing the rectangle.

Pete

[Paj]

Hello all. New to the forum here so my apologies if I am overlooking something obvious but I cannot see any option on my version of Axure (7.0) that would allow me to add “Web Fonts”

As you can see on my screen when I click Generate Specification there is no option for Web Fonts as you seem to have. Has something changed? Am I in the wrong version? Thanks for any help.

By the way I can see the icons when I publish locally but not on another computer, they are showing the rectangle.

Pete

Hi zimbeta,

You need to use the Generate Prototype function (F8 key), which will create all the HTML for you.

At the moment, you’re using Generate Specification (F9), which creates a specification as a Word Doc.

[zimbeta]

Hello Paj. Thanks for your reply. I knew it was something obvs.

[giraffe]

I am wondering if anyone have a way to use fontawesome collaboratively? I imported fontawesome from a server location but when my colleague publishes the file on his machine, he doesn’t get the icons showing. That is the same for all other imported libraries.

Would you have a solution for this (i.e. not having to import the libraries every time on each person’s machine)?

My colleague is suggesting to use the icons as masters instead, that way they will stay in the document. But that limits me to a specific size and colour for each icon. I no longer have the flexibility that fontawesome gives.

[Paj]

I am wondering if anyone have a way to use fontawesome collaboratively? I imported fontawesome from a server location but when my colleague publishes the file on his machine, he doesn’t get the icons showing. That is the same for all other imported libraries.

Would you have a solution for this (i.e. not having to import the libraries every time on each person’s machine)?

My colleague is suggesting to use the icons as masters instead, that way they will stay in the document. But that limits me to a specific size and colour for each icon. I no longer have the flexibility that fontawesome gives.

Note that the font and the library are two different things.
The library needs to font installed to work, but the font does not need the library.

Anyone who wants to generate an Axure prototype using FontAwesome needs to have the font installed on that machine. Once you install the font once, you dont need to do it again.

The library is a collection of widgets for each FontAwesome symbol which makes it easier to use, but it isnt necessary.

End users (such as clients) are able to view a prototype containing FontAwesome symbols if the ‘Include Web Fonts’ option is checked in the Generate Prototype dialog. From the sounds of it, this is why the icons aren’t displaying properly. The first post in this thread covers how to get that working, including the URL of the CSS file you will need.

Let me know how you go!

[mervin55]

All,
I have created a new rplib file for version 4.0.3 of Font Awesome. You can load this the same as the previous version just use the new URL locations for the proper version of the fonts and files.

Here is an updated version of the instructions:

1. Download and install Font Awesome 4.0.3

http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.0.3.zip

Open the “Font” folder and install the font.

2. Restart Axure

If Axure is open, shut it down completely and re-open it. This will allow you to choose FontAwesome from the font droplist.

3. Add Font Awesome CSS link to “Web Fonts” in the Generate Prototype dialog

Code:
netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css

4. Install the Axure Font Awesome widget library (attached below)

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

5. Drag and drop FontAwesome widgets from this library.

Adjust style of all icons using the “FontAwesome” custom style or format individual icons.

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

Enjoy,
Max Ervin
FontAwesomeV403.rplib (3.04 MB)

[Williams]

Cool,
thanks a lot!

[kipaxure]

Hi guys,

Anne-Sophie has submitted to the help desk a 4.1 version of this library (attached). Thanks Anne-Sophie!
FontAwesomeV4.1.rplib (4.59 MB)

[Williams]

Cool! Many thanks!

BTW. Whenever you insert an FA symbol into a widget — it appears ~4-5 px higher than vertical centre.

For example, if I create a box, say 50x50, insert a symbol as text, then set box align vertical and horizontal aligns to middle&center – a symbol looks just a bit higher, so to make it perfectly centered I have to add 4-5 px padding from the top.

Is there a way to fix it?

Here is an example: Prototype

UPD. As you can see, in Axure and in Chrome it looks very different
So the solution is to use two rectangles with no padding but mind the WYSIWYG princpiple is not working properly.

BTW3. Here is an updated css link for the Font Awesome 4.1.0 library:
http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css

[liverick]

Hi Paul,

 My OS is MC OS x, the version of Axure is Pro7.0,

as you say:

1. Download and install Font Awesome

http://fontawesome.io/3.2.1/assets/font-awesome.zip

Open the “Font” folder and install the font.

2. Restart Axure

If Axure is open, shut it down completely and re-open it. This will allow you to choose FontAwesome from the font droplist.

i have 2 problems,
1)how can i install the font
2)when i restart axure, i can’t see font droplist.

can you help me , thank you !

[JamesyGB]

Hi Kip,

I wondered if you knew the process on creating the library file for fontAwesome? Is it really a case of copying the character into axure one by one?

Thanks.

[light_forger]

Hey JamesyGB and Kip and/or Paul,

I am curious of the same! So far I have found two ways of copying Unicode characters in an Axure library:

Via Character Map:

1. Install font locally.
2. Open Character Map (if on Windows). For more information: Using special characters (Character Map): frequently asked questions - Windows Help For Mac, see steps 3 and 4 here: The Pragmatic Designer: How to use your own icon fonts in Axure
3. Select Icon and copy as Unicode.
4. Paste in an Axure label and assign to appropriate local font (should work for a .CSS based web font too if its font name and @font-face assignment matches that of the local file and entry made under Generate HTML->Web Fonts).

Via FireBug Console (should be platform agnostic):

1. Install Firefox and its plugin Firebug: Firebug
2. Open Firebug’s console via bug icon and selecting Console tab.
3. Type copy(’\uxxxx’) where xxxx = unicode for icon e.g., f101
4. Paste in an Axure label and assign to appropriate local font (should work for a .CSS based web font too if its font name and @font-face assignment matches that of the local file and entry made under Generate HTML->Web Fonts).

UPDATE July 24th, 2014: You can accomplish the above via the built-in consoles for Firefox and Chrome, too!

I still don’t know how each individual FA entry got its icon: I am assuming screenshots of the Character Map or from FA’s cheatsheet website were used.

Plus, I think the FA style seems to do nothing, but pass along the correct font assignment per label widget (to help with translation of unicode to icon for local or web font).

light_forger

[culvi]

THIS IS AWESOME!!! Thanks so much for providing this. It’s insanely useful.

Question - Anyone notice that some of the icons don’t show in the library? Is this intentional when the rplib is created? Specifically the Form Control Icons provided by Font Awesome. There are numerous other icons missing as well in the other sets as well. Not complaining what so ever, just shedding the light.

[light_forger]

Hey Culvi,

I am glad you found it useful! Which version of the .rplib are you looking at? There are 2 floating around: one is by Paul (v3.2.1) and the other one is 4.0.3 I believe, but the name of the user escapes.

Also, there are multiple accordion panels for 3.2.1 revealing additional icons. Hope this helps!

light_forger

[egrigolon]

What I’d like to see is a way to import fonts automatically instead of using external URLs. I cannot link external URLs when I send prototype to clients.

Is there a way to attach custom fonts on generated HTML files? If I use Glyphicons for example, I’d like to have the .ttf file and proper CSS statements automatically on the prototype.

Thanks,
Eugenio

Edit: I was able to point the fonts using local folder, and I need to manually add it on every prototype I work (include configuration).

[light_forger]

Hey Egrigolon,

I would recommend using the method described here by Lennart Hennigs: Font embedding with @font-face (Axure 7 Web Fonts)

Pair this with ProtoSee (for local storage; there are other methods of course): ProtoSee: an off-line HTML prototypes viewer for iOS ProtoSee offers functionality for importing fonts, but I have not being able to find any documentation on that!

light_forger

[Emil]

Hello all.
I have a question regarding license rights of this particular font. Is it free for commercial use? Does anyone of you possess any licence document of this font.
Would really appreciate.

Thanks in advance,
Emil

[light_forger]

Here you go: Font Awesome License

light_forger

[Emil]

Thanks,

I’ve already visited this site but wasn’t sure if those conditions applies also to this particular version of the fontawesome.

Once again,
thanks

Regards,
Emil