Axure Tutorial: Using Font Awesome Icon Library on Axure RP

Introduction

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.

With just a few simple steps, you can use Font Awesome's 2,099 free icons on your own projects. The icons cover a wide range and the style is relatively uniform.

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:

  1. Font Awesome 6 Free-Regular-400.otf;
  2. Font Awesome 6 Free-Solid-900.otf;
  3. 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.

Font Awesome's icon library: https://fontawesome.com/icons

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. 


Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design.


Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.