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


#1

Hey everyone,

Font Awesome 5 Pro is pretty, well… Awesome!! However, getting it working in Axure 9 has been really tough for me. So, after days of head scratching and troubleshooting, here’s how I got all Font Awesome 5 Pro fonts working in both local preview and remote AxShare generated prototypes with Axure 9:

Step 1: Go Pro: https://fontawesome.com/pro - It’s $60/year, and worth it imho
Step 2: Download: https://fontawesome.com/download - Download and unzip the Pro for Desktop zip of fonts.
Step 3: OS Font Install: Go into the folder you unzipped, then into the otfs folder, and install all 4 of the otf font families included. Usually that’s a double-click on each, or a bulk select, right-click install all at once. Regardless, once you’ve done that, restart Axure so the fonts will show up in Axure’s global fonts select list.
Step 4: CSS URLs: https://fontawesome.com/start - go to that url and get the latest Font Awesome CSS urls. Specifically, select these filters: Pro, Solid, Regular, Light, Brands, Webfont, and keep that page open, as you’ll use that in Step 5. While you’re there, click the blue + icon in the lower left, and add axshare.com (ie: the usable on: indicator). Here’s what all that looks like:

Step 5: Add Fonts: In Axure 9, Click the blue Share icon in the upper right, click the Fonts tab, and add 4 entries exactly like this, but using whatever the current URLs you got from Step 4 were. Here’s what I had at the time of writing this post (the exact version numbers will soon get outdated, so again, use the URLs you got from step 4, the inclusion of URLs here is just for demonstration purposes):

Font Label: Font Awesome 5 Pro Solid
Choose Link to .css
URL of css file: https://pro.fontawesome.com/releases/v5.7.1/css/solid.css

Font Awesome 5 Pro Regular
Choose Link to .css
URL of css file: https://pro.fontawesome.com/releases/v5.7.1/css/regular.css

Font Awesome 5 Pro Light
Choose Link to .css
URL of css file: https://pro.fontawesome.com/releases/v5.7.1/css/light.css

Font Awesome 5 Pro Brands
Choose Link to .css
https://pro.fontawesome.com/releases/v5.7.1/css/brands.css

Here’s what that looks like when it’s done:

Step 6: Add Font Mappings: This ended up being the most unintuitive part for me. So, while still in the Fonts tab from Step 5, click the small Font Mappings link in the upper right, and add the following four font mappings EXACTLY. TYPOS MAY BREAK FONTS, SO GET THESE EXACTLY RIGHT!!

Font Awesome 5 Pro >> Solid
Font Awesome 5 Pro >> 900 >> normal

Font Awesome 5 Pro >> Regular
Font Awesome 5 Pro >> 400 >> normal

Font Awesome 5 Pro >> Light
Font Awesome 5 Pro >> 300 >> normal

Font Awesome 5 Brands >> (left blank)
Font Awesome 5 Brands >> (left blank) >> (left blank)

Here’s what that looks like:

The reason I went all caps-locky above was I realized that I had been writing Font Awesome 5 Pro Solid in the Font Mappings open text field for the map to font family field, and that was actually causing the Pro Solid fonts to not render. However, when I changed it to just Font Awesome 5 Pro and removed the Solid part, and just let the font weight value carry the Solid treatment, it worked.

So, all that to say… with any luck, now you’re able to do what I do - live on the https://fontawesome.com/icons page, pasting Font Awesome glyphs directly into Axure, and then highlighting the broken thing I pasted and changing the font to FontAwesome Pro or Brands, and presto, now you can publish to AxShare or whatever, and get all the font awesomeness you could ever want!!

Pro tip: There’s a kinda hidden but very convenient way to copy the icons off the icons page. On https://fontawesome.com/icons (it’s the new cheatsheet basically), click the little info icon in the upper right. That will show a nice little clipboard icon below each icon. Click that, and the glyph is in your clipboard, and ready to be pasted anywhere, including Axure!

I sincerely hope this helps some people. It’s taken me days to figure this out. Best of luck to you all, and please hit reply and let me and the community know how well these instructions worked for you!

Thanks,

  • Erik

4 steps to get FontAwesome 5.11.2 FREE + Axure 9 working
#2

Hi Erik,

Thank for posting this! I went through the steps you outlined and was able to get Font Awesome fonts to render correctly here at Axure HQ–sweet! I did notice one thing that hopefully makes things easier:

In Step 4: CSS URLs, when visiting https://fontawesome.com/start, you can click “All”. This will make it so that in Step 5: Add Fonts, you only have to link to one .css (all.css) and also makes it so that you don’t need to add font mappings as described in Step 6: Add Font Mappings.
2019-02-12_1645

Hope this helps!


Font Awesome CDN is Being Sunsetted - What Now?
#3

Erik,

Thank you VERY MUCH for taking the time to document this out. I wish there was an easier way to do this in the Axure application, but this help me a TON!

Do you know of a way to set this up so that it is shared across projects? I wish that I could do all of this configuration on a shared library and then have it inherited across the projects that use the shared library. I will have a number of projects going at once, and I wold love to have a central place to control this.

Cheers,
Ethan

EDIT: If you ever built a book in Indesign, you were able to have multiple files that were related as a “book” and if you made any style updates to one of the “chapters” you had the option to push those changes to the rest of the files. This is what I would love to have…I miss the more mature style support of the print world from 15 years ago…oh and being able to define Spot colors for a project. A guy can dream…


#4

@Justin_Axure when I used the all css option from fontawesome, I found that some icons from the brands and pro solid sets weren’t being rendered. I probably should have clarified that in my original post, and will update my original post either way depending on the outcome of this discussion. Would you be willing to report back after a week of active use of the all css urls for Font Awesome 5 pro, and let the community know about your experience? That would really help us get closer to having closure on this point. I agree, using all would be vastly preferable, if it actually worked 100%, which in my experience, it didn’t.

@atimefordesign Glad it was helpful! Regarding having it be “shared across projects”, I’m almost positive it’s not possible. That said, for future projects, what you could do is make a starter project file that you duplicate from in order to get things going without having to redo all of this each time. The only thing I’d caution you about is regarding version numbers - fontawesome version numbers are constantly changing, and they’re built into the css urls, so, it might be worthwhile to update the urls using the latest each time you duplicate your starter project. Hope that helps!!


#5

Is there a widget library for Font Awesome 5 Pro that I should be using? This is how I had used previous (free) versions of Font Awesome. I had a Widget Library to pick from and then I could drag the “icons” onto the dartboard and style them as needed.


#6

@atimefordesign the way I work is - I live on fontawesome.com/icons because the search function is really powerful. The search matches both text and often meaning. Since there’s >5,000 icons, I think having a really thoughtful search becomes the most important piece. So, I probably wouldn’t use a widget library even if there was one for that reason alone. Instead, what I do is search for the kind of thing I want an icon for, and when I find the right one, I hit the copy button below it (that’s what the Pro Tip near the end of my original post was for), and then paste into the text field on whichever widget it should go on (and correct the font if it wasn’t right initially). Thoughts?


#7

This is going to be the way I work. Once I decide to use a specific icon, then I will manually add it to the widget library for that project. This will help the team use the same version of specific icons when there are multiple options. The search in Axure is actually kind of a pain in the butt anyway, and the one on the FA.com is pretty darn radical.

I did use the .css URL for all the fonts https://pro.fontawesome.com/releases/v5.7.2/css/all.css as mentioned by @Justin_Axure and it worked perfectly. If it works for you as well, you can add it to your initial post.


#8

@atimefordesign sweet - did you also skip the font mappings step? Maybe I’ll try it again some time soon and see if I can get it to work.

Also, quick extension our previous convo - I totally agree that once you’ve got an established suite of icons for certain things in a given project, there’s a lot of value to standardizing that for the rest of the team to re-use. You could use axure share to share a widget library, or just add a page in your sitemap dedicated to common design patterns, and put whatever you need in there.


#9

Hi @r0tt3n,

Thanks for clarifying! I tried out a handful of the brands when using the all.css link but didn’t find any issues when copying the glyph from FontAwesome’s cheat sheet. However, I did find that if I entered the text of the brand (e.g. “apple”), the icon would render on canvas but would display as text when published to Axure Share (this is expected as ligatures aren’t supported for Web Fonts + CSS by Font Awesome). Does this sound like what you were running into?

If not, were there any specific brand glyphs that weren’t appearing correctly when published?

Note: If anyone is curious on why Font Awesome’s icons will render in desktop applications and not on the web when entering the text of an icon, check out their note on Ligature use in Font Awesome on the web on the following page:
https://fontawesome.com/how-to-use/on-the-web/setup/getting-started


#10

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?


#11

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!


#12

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


#13

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


#14

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:

  1. Go to: https://fontawesome.com/icons
  2. Click the “i” icon to “Show Cheatsheet”
  3. Locate your icon and click the clipboard icon.
    CopyGlpyh
  4. 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!


#15

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.


#16

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


#17

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?


#18

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?


#19

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!


#21

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:

  1. 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.

  2. 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.

  3. 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.


Font styles suddenly change to normal in previews