Axure RP can use Web Fonts, which makes it very convenient to include Font Awesome. Font Awesome is a font that is mainly used for icons, not the fonts we are familiar with.
1. Install the Font Awesome font file locally
To use Font Awesome, it must be recognized locally, so you need to install the font file first. Go to the official download page https://fontawesome.com/download and choose to download the Free for Desktop version.
Unzip the compressed package and install the 3 otf font files in the otfs folder:
- Font Awesome 6 Free-Regular-400.otf；
- Font Awesome 6 Free-Solid-900.otf；
- Font Awesome 6 Brands-Regular-400.otf
After successfully installing the font file, restart Axure, and the font icon of Font Awesome can be displayed on this machine.
2. Add web fonts configuration to Axure project
Simply installing fonts on this machine will not solve the problem of font display on other devices. By configuring the web font, the font can be called online, so as to solve the problem that the device does not support the display of the font.
Axure supports using .css or configuring @font-face to call web fonts, click [+ Add Font], add web font, and select [Link to .css] to add a css reference:
Font Label set to Font Awesome Free
URL of CSS file set to https://use.fontawesome.com/releases/v6.1.1/css/all.css
The css file version referenced here is 6.1.1, which corresponds to the version installed locally. The css file address comes from font awesome official site.
If you need other versions of css files, you can visit https://fontawesome.com/account/cdn (requires account registration) and choose your own css as needed.
Web font configuration is complete, you can close the page. At this time, the Font Awesome font is not installed on the instant demo device, and you can still see the icon you set.
Note: A font configuration is added here using all.css. You can also split Brands, Solid, and Regular into 3 corresponding css configurations according to your needs.
3. Use Font Awesome Icons in Axure
After completing the local font configuration and web fonts configuration, you can directly paste the icons on Font Awesome locally.
Since only free icons of Solid, Regular, and Brands can be used, the corresponding types can be filtered directly on the left. Select the desired icon and click the Copy Unicode Glyph button to copy the icon. It can then be pasted directly within Axure.
In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.
If you like the article, please share it with others with page link, thanks for your supporting! ❤
Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design.