Font Awesome 5 icons in Axure Pro 8 not showing when published

#1

Working with Font Awesome 5 in axure pro 8 and the new 5 works great except none of the icons will display when published to axureshare. If installed on computer it makes quick work. I even created a special library and published that and linked it to my file so to make sure that the fonts would show but nothing. Has anyone else had issues using Font Awesome 5?

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

#2

There is a little bit of a problem with Axure naming fonts in the exported html (they are not compatible with FA5 css).
To solve your issue, you can change font mapping in the ā€œGenerate HTMLā€ options or try my slightly modified CDN:
https://axure.guru/cdn/FontAwesome-501/css/fontawesome-all.axure.guru.css

#3

Hi everyone, adandrews also contacted us through the primary support channel; it sounded like there may have been an issue involving mismatching asset versions (e.g. mixing FA 5.0 and 4.7 files/links). As an example, using a former custom library (e.g. FA 4.7) with the FA 5.0 CSS link would break some of the updated icons. As axureguru mentions, part of the reason comes down to the 5.0 revamp and icon name changes:

https://fontawesome.com/how-to-use/upgrading-from-4

While we havenā€™t created/published an updated RPLIB for FA 5.0, an option for adding new 5.0 icons for now is to copy & paste from their cheatsheet:

https://fontawesome.com/icons?m=free

After pasting in RP, you can apply the appropriate FA 5.0 font (e.g. ā€œFont Awesome 5 Freeā€ or ā€œFont Awesome 5 Brandā€).

Another option is to import the raw SVG from a folder of their zipped archive: ā€œadvanced-options/raw-svgā€

https://fontawesome.com/get-started/desktop

#4

Hello, gentlemens!

Iā€™m working on a project that uses Awesome Font. I noticed that the typography was not working even referencing the css. This led me to correct this situation, I downloaded the typography version 5 and I decided to set up an axure library for these icons. The problem is that I do not have the time to build it, but I started and I leave here as a collaboration, for those who want to help.

Link: https://drive.google.com/open?id=14S7yRB331q2HcF9u9qGmYngR7DKhdm9-

#5

@axureguru

I have gone through your list of steps (on your website) for Font Awesome 5.0.1 and I am at a total loss. Using RP8 with Chrome.

Installed the fonts (Win 10)
Added the icon library (totally underrated addition, btw - thank you!)
Added the CSS location to Generate HTML>Web Fonts
Post to Axure Share
Access on another computer without the installed fonts

It simply will NOT load. In Chrome, I get the ā€œcharacter boxā€. In IE/Edge, I get nothing.

I have never used a prior version of FA, so I wouldnā€™t expect any remnant issues.

Any thoughts?

Cheers.

-g

#6

@gitterson

Hey,
At the moment itā€™s hard to say what could have happened. But I have some ideas about what we can do:

  1. In Web Font settings, check if the ā€œInclude Web Fontsā€ checkbox is ticked (I once forgot about it and it took some time before I discovered what was the problem)
  2. You can share the link to the page you are exporting (you can do it in a private message) and I will take a look
  3. Check this link: https://axure.guru/icontest/, if it does not display icons correctly, it means that I have broken something or I havenā€™t took everything under consideration ;]

Cheers.

#7

I did the Icon Test - it does not show up properly (images on top, character containers on the bottom).

Hopefully that means there is a logical fix to be done in the CSS?

Cheers.

-g

#8

@gitterson

Could you try using this link for the repository:
https://axure.guru/cdn/FontAwesome-501/css/fontawesome-all.axure.guru.css
Or just check if the link starts with https not http.

Iā€™ve noticed that there was http version of the address in my ā€œOut of the boxā€ RP file, so if you where using this one, it may not work (already corrected).

By the way, all my mobile devices didnā€™t give a f*** about this issue ;]

#9

Yes, that is the current CSS location that Iā€™m using. Strange that the Icon Test link works neither on my other laptop (without FA fonts) or my Android (Galaxy Note).

Not sure what to do next.

-g

#10

@gitterson

Made some magic on the server.
Try refreshing your mock-upā€™s and let me know if it works now.

#11

Well, your icon test works now but my prototype still does not! sigh

Thanks for the help. Iā€™ll look more when I get some timeā€¦

-g

#12

Hi all,
Iā€™ve made an update of the Font Awesome library for Axure http://axure.guru/font-awesome-5-axure-8-library/.

Main improvements to libray:

  • It covers version 5.2 of Font Awesome Free (brand icons not included but there are two icons for poo)
  • It works with no need of modified css files (so in example, you can just put all the files from FATeam on your own server and turn it to private repository)

Cheers!

#14

This solution doesnā€™t workā€¦ Iā€™ve been using 5.0 glyphs from their cheatsheet and it does nothing different.

Also, this is from January, any updates on when Axure is releasing a fix for this?

#15

I have the same issue. I am using Font Awesome Pro and when I share to Axshare the ā€˜shareā€™ icons display as expected on mobile but on desktop they are displaying as outline versions rather than solid. I am not sure what to do with the link you have posted? All other icons are rendering as expected.

#16

Hi,

When using Font Awesome Pro you have to make sure that few thing are done.

First of all

  • You need to have Font Awesome Pro installed on your device.
    This way you should be able to see icons in Axure and In your browser after generating the prototype (locally or to axshare/cloud). Still, other people without Font Awesome Pro installed on their computers will not be able to see the icons.

What to do to load the fonts on other people devices?

  • in your prototype you need to link the font package from the Font Awesome CDN.
  • You need to add address/domain of your mock-up on your Font Awesome Pro CDN configuration.
    This way after generating the prototype to the cloud, other users should be able to see icons.

Also you need to remember that the library iā€™ve created works the best with Font Awesome Free and:

  • it contains only icons from version 5.2 of the font.
  • When you drag and drop the icon from library an it is not working, check the font family that is applied to this icon (it probably is Font Awesome Free Regular or Solid) it should be Font Awesome Pro Something

Helpful links:

Cheers!

#17

Thanks for that detailed breakdown. I actually got it all working but a few icons are rendering as outlines even when solid is being selected. Not all of them just a few. Iā€™ve worked around it though.