6 Steps to get Font Awesome 5 Pro + Axure 9 working

r0tt3n · 2019-02-20 20:27:57 UTC

Yes, exactly! That’s what I found - importing into axure was fine, but publishing to axure share was randomly not rendering some icons. The only way I could get it to work for all scenarios was by doing exactly what my original instructions described, with all the font mappings, etc. I don’t see a way to avoid that and still get it working everywhere 100%. Thoughts?

Justin_Axure · 2019-02-20 23:38:00 UTC

Hi @r0tt3n

Thanks for your help with this so far! We’d like to make sure that the “all.css” option works for all icons to make this process as smooth as possible. That said, when the brand icons weren’t displaying, can you describe how the brand icons looked when you published them to Axure Share? Also, can you share specific brand icons you were having trouble with? I’d like to relay those over to our QA teams for further testing!

Thanks again!

atimefordesign · 2019-02-21 21:54:00 UTC

I will 100% use a shared library…once Axure 9 supports team projects. I already have it up there, and I am using the cloud based library, even though it is a pain for a team of 1. Nice thing is that my first compatriot is joining me on Monday, so hopefully they turn on the Team Project feature “soon”

cc: @Rachel

manjax · 2019-02-25 22:53:25 UTC

I have not been able to get FontAwesome to work with axshare since FA3 or 4.

A few months ago I tried this same method to get Font Awesome Pro to work with no success.
I was very excited to see this post with the hope that some new magic had been built into RP9, but this still doesn’t work for me at all…

I initially configured everything in RP8 using the same settings (I’m currently trying with 5.7.2, but I’ve tried using 5.7.1 as well) but FA won’t render on axshare or in desktop preview. Then I opened the same project in RP9 (hoping for that magic) and nothing on axshare or preview. Thinking that somehow RP8 might have tainted things, I tried the settings again on a virgin RP9 project with nothing but a few FA icons and still nothing on axshare or preview.

When I say nothing I mean that no glyphs are being rendered at all, just substituted with system fonts rendered to the appropriate weight.

If I deviate from the instructions and add Light, Regular, and Solid to the end of the Font Family Names in the Font Mappings, then the pro glyphs will render in the desktop preview but nothing at all on axshare.

I was initially excluding FA Brands in my experiments, but then added it with no change. Thinking that there could be an issue with the FA pro CDN, I also tried using FA Free… even less success than Pro, since the glyphs won’t even render in the desktop preview. I also tried adding the webfont with no change either.

This whole thing seems to be a total dead-end for me, and my frustration level just increases when I read reports of three different people managing to get it to work.

I am including my test file for anyone to pick apart and hopefully offer some insight into why this won’t work for me. It still includes my failed Webfont and FA Free experiments. The font Nunito is also in there but it works exactly as intended.

I really hope that I’m just missing something small.

If anyone has successfully used Font Awesome Pro (or free!) on axshare in such a way that the glyphs render on a device that does not have the fonts installed, I would greatly appreciate you sharing an axshare prototype and/or the RP file used to create it.

Thanks!

And my system:
MacOS Mojave 10.14.3 (18D109)
Axure RP 8.1.0.3382
Axure RP 9.0.0.3634

Nunito FA Test.rp (52.6 KB)
https://iddtg8.axshare.com

Justin_Axure · 2019-02-25 23:44:36 UTC

Hi @manjax,

In the attached file, it looks like ligature functions are used to render the icons on canvas, which means the name of the icon is being typed. Ligature functions are supported on desktop applications, but at the moment, Font Awesome doesn’t support this type of usage on the web.

Instead, you’ll want to copy the glyph of the icon that you want, then paste that in Axure RP. To do that, please follow these steps:

Go to: https://fontawesome.com/icons
Click the “i” icon to “Show Cheatsheet”
ShowCheatsheet.png1232×318 26.6 KB
Locate your icon and click the clipboard icon.
Paste the glyph into a widget that uses the Font Awesome font.

I’ve gone ahead and made an edit to your .rp file. You’ll see on “Page 1” that there is an “acorn” icon on page, which was added using the steps outlined above. Also, you’ll notice that I’ve made some changes to the fonts where I reference the all.css and remove the Font Awesome font mappings.

Nunito FA Test_EDIT.rp (56.6 KB)

https://nyjd8c.axshare.com

I hope this helps!

manjax · 2019-02-28 21:47:57 UTC

Justin,

This did the trick! I think the core of this was my misunderstanding of how ligatures work… I think I had assumed that it was just a kind of shortcut for calling the glyph and not a distinct functionality.

Thanks for all your help.

baum805 · 2019-03-14 15:35:17 UTC

I’m trying to use Font Awesome Free right now with RP 9, and followed r0tt3n step by step ^, with the exception that I clicked All in step 4 as Justin_Axure suggestion, and I pasted only the Font Awesome Free (All) url (without the surrounding code), in the Publish Project/Fonts tab.

Then copied / pasted the glyph into a text widget in RP 9, change font (“Typography” selection in Style tab) to “Font Awesome 5 Free”, and it still doesn’t display the icon. Just the standard box with question mark.

I’m pretty new to RP in general, and Font Awesome, so perhaps it’s something simple I’m missing.

I have a custom RP library that includes older version Font Awesome icons, created by my predecessor, that I and another designer need to use going forward. So any help would be much appreciated! Thanks in advance!

My system:
MacOS Mojave 10.14.3
Axure RP Team Edition 8.1.0.3382
Axure RP Pro Edition 9.0.0.3635
Chrome Version 72.0.3626.121

baum805 · 2019-03-14 15:51:56 UTC

Also, it looks like predecessor was using RP 8, and Font Awesome 4.5. His icons render in Axure Share browser views. If I am using RP 9 to open those older files, and have latest Font Awesome installed, will I be able to use his custom library that uses the FA 4.5 icons and render them? Anything special I need to do?

Justin_Axure · 2019-03-14 23:50:31 UTC

Hi andrea.baumgartner,

Can you verify whether you’re copying a free and regular style icon from Font Awesome? Any of these icons here should work:
https://fontawesome.com/icons?d=gallery&s=regular&m=free

I’ve created a sample .rp file that uses Font Awesome 5 free here:
FontAwesomeFree.rp (43.8 KB)

Can you try opening that file to see if it works on your end?

baum805 · 2019-03-15 15:10:43 UTC

Yes, thanks for sharing that file. It worked for me and is now working in my files also. I had selected free yesterday multiple times when searching icons, but perhaps I somehow unselected and ended up copying pro icons into axure. Whatever the reason, it’s working! Thank you for your help!

r0tt3n · 2019-08-15 21:04:31 UTC

Update on this thread - I’ve recently confirmed that @Justin_Axure 's suggestion of simply adding one entry to the Share > Fonts Tab section that links to the all.css file DOES HAVE UNDESIRED SIDE-EFFECTS. Here’s how to reproduce:

In Axure -> Share -> Fonts Tab -> Add just one font - Font Awesome’s all.css font (https://pro.fontawesome.com/releases/v5.10.1/css/), and leave font mappings unused.
Go to https://fontawesome.com/icons -> Click the Info circular icon in the upper right to see the copy link below each icon -> click the copy link on an icon -> In a text box in axure, paste that icon that’s in your clipboard, then highlight it and set the font to Font Awesome 5 Pro, and set the font style to SOLID. The icon should be a solid color now.
Publish to share.axure.com, and view.

You’d expect to see that icon in SOLID style.
What you actually see is that icon in BOLD style (thicker lines, but not solid shaded).

The reason this happens is the font mappings aren’t present, so the browser interprets SOLID as BOLD. However, if you follow the steps in the original post, the SOLID style will be correctly interpreted.

Also note that the links to these fonts is buried behind fontawesome.com -> Profile Menu -> Font Awesome CDN.

Originally it was buried even deeper, but after I posted this:
https://forum.axure.com/t/font-awesome-cdn-is-being-sunsetted-what-now/ and linked someone from the Font Awesome’s support team to it, they decided to move it to a slightly more discoverable place and removed the language indicating the CDN is going away. So, we’ll see what comes next.

In the meantime, unless I’m missing something, it appears the font mappings are still required.

gabrielemaffoni · 2019-10-14 16:36:37 UTC

Actually I found out a simpler way to show Font Awesome 5 icons on axshare.

Steps:

Go on Font Awesome 5 website and create a kit (Home > Start using > Create your own kit)
Copy the generated script
Log in your axshare/axure cloud account > select options on the prototype you’re working on (three dots, if you use axure cloud) > select “Plugins”
Click on “Add plugin” and paste the script you copied in the field. Make sure the code is be placed “Inside <head></head>”.
Save.

You won’t need any mapping, just the unicode characters

Hope it’s helpful!

r0tt3n · 2019-10-14 21:13:51 UTC

Woah - I can totally see how that would work, I’ll give it a shot this week and report back. In the meantime, thanks so much for sharing - if this ends up being the kind of silver bullet it sounds like it might be, I’ll probably revise the original post or make a new one officially updating the recommended steps. Very cool.

MarianneGotfredsen · 2019-11-18 14:31:00 UTC

Hi Erik
Thank you so much for this guide. I have used it to create a simplified version for FontAwesome 5.11.2 FREE.

Best regards, Marianne

r0tt3n · 2020-02-27 20:14:50 UTC

Hello @axure-user-1 - welcome to the forum, and congrats on your first post!

If you’re open to a bit of constructive feedback on your first post, I have something for you. Generally speaking, when you’re posting to a forum and asking for help, the single most important thing you can do is describe the exact problem you’re experiencing, in excruciating detail, especially the part where you include screenshots of the problem, and exact steps someone else would require to reproduce what you’re seeing. In general, reproducability is the single most important part of getting help - otherwise, the response is usually shrug, deafening silence, or worse, getting flamed.

So, with that in mind, give your post above another read, and see what opportunities for improvement there might be.

Julia · 2020-03-05 19:43:59 UTC

Hi everyone,

I’ve tried hard to follow the instructions diligently to make Font Awesome works with Axure yet to succeed. I used one .css url for all Font Awesome fonts as @Justin_Axure suggested and skipped Step 6: Add Font Mappings.

Has anyone lately followed the instructions and got FontAwesome + Axure 9 working? Did you do anything differently than the instructions in this thread?

Thanks,
Julia

shoelessjoe51 · 2020-07-25 22:22:09 UTC

In case anyone makes it this far down the thread I wanted to add one thing that prevented this from working for me.

I would copy a glyph from “Solid” category from the Font Awesome website and paste it onto the canvas. By default it would show up as a little box in Axure until I changed the font to Font Awesome and then it looked fine. But when I publishedto Axshare it would continue to show the box. But I noticed that some of the icons were working and realized those were from the “Regular” Font Awesome category.

Once I realized I had to actually select the “Solid” style from the Style drop-down in Axure all the other icons started working fine.

Maybe I just picked the wrong arrow icon to start with but this was super confusing.

strelec · 2020-12-07 02:03:56 UTC

I had to reinstall Axure on a new PC and decided to try using the latest Font Awesome fonts. I spent a couple of hours trying different methods in the post. The only thing that ended up working for me was the plugin from @gabrielemaffoni 's post. Ironically it’s the fastest one to install too, so I wish I started from it. Hope this may save time for someone.

armplinker · 2021-02-02 18:05:42 UTC

I am sorry to say so but Font Awesome has decided to deprecate the use of CDN, viz.
" this version of Font Awesome’s CDN is being Sunsetted.

You may still use it for any of the domains you’ve set below, but _we will not be bringing new features to this service . Instead, we’re using Font Awesome Kits host and do even more for you with auto-accessibility, better performance, updates without touching code, and more!"_

so if you follow these instructions and go to the ‘start’ url, you will see a dialog to create a KIT, which is in effect a smarter CDN, since it only includes what your code uses in the download. I am in the process of trying to figure out exactly how to do this in RP9.

armplinker · 2021-02-02 18:57:13 UTC

The deprecation language still seems to be there. I am not sure FA is really aware of the issue that in fact makes their font package less useful to Axure users.