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:
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.
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.
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.
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¢er – a symbol looks just a bit higher, so to make it perfectly centered I have to add 4-5 px padding from the top.
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.
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):
Open Firebug’s console via bug icon and selecting Console tab.
Type copy(’\uxxxx’) where xxxx = unicode for icon e.g., f101
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).
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.
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!
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).
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!
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.
