Getting Font Awesome to work in RP10

#1

I have been trying to get FontAwesome 5.15.4 to work as a webfont with my RP file. I’ve already read allllll the various step by step things. Nothing is working and I’m doing what I always used to do in RP 9. I set up the webfont with a link to the css. I map the font in my project to the web font. And… nada. I can’t seem to find the accurate css link to the version of font awesome I have installed. I’ve torn the FA website apart and there’s no links there (anymore). This UI is so different I can’t figure out if I’m doing the right things. Has anyone gotten this to work?

#2

Hey,
I got the free version to work.
I used the CDN link from here,

Under Publish Project > Fonts I add a font (you can give it any name) and paste the following under @font-face:

font-family: 'Font Awesome 5 Pro';
font-style: normal;
font-weight: 300;
font-display: auto;
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-light-300.eot');
src: 
    url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-light-300.eot?#iefix) format("embedded-opentype"), 
    url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-light-300.woff2) format("woff2"), 
    url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-light-300.woff) format("woff"), 
    url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-light-300.ttf) format("truetype"), 
    url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-light-300.svg#fontawesome) format("svg");
}

@font-face {
font-family: 'Font Awesome 5 Pro';
font-style: normal;
font-weight: 400;
font-display: auto;
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-regular-400.eot');
src: 
    url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"), 
    url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-regular-400.woff2) format("woff2"), 
    url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-regular-400.woff) format("woff"), 
    url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-regular-400.ttf) format("truetype"), 
    url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-regular-400.svg#fontawesome) format("svg");
}

@font-face {
font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.eot');
  src: 
url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"), 
url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.woff2) format("woff2"), 
url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.woff) format("woff"), 
url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.ttf) format("truetype"), 
url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.svg#fontawesome) format("svg");

This embeds the three font weights of the Pro Version.

(You could do three separate entries for the fonts in the terrible UI but this bundles all the FA weights in one.)

Enjoy.

Cheers
l.

#3

And another quick update:
If you have a paid version you can get a CDN link from them and use it for your prototype. Here for Axshare:

  1. copy the provided CDN link
  2. add app.axure.cloud to the allowed domains there
  3. upload your prototype to Axure Cloud
  4. go to https://app.axure.cloud/
  5. create a plugin for the project and paste the CDN link and apply it to all pages

That should enable all icons

And you can use the URL of the CDN in local prototypes without a problem.
Just paste it under Publish Project > Fonts > Link to .css

Cheers.