Sign in Subscribe
orclapex

Using Font Awesome 5 Pro

VincentMorneau

• 3 min read
Using Font Awesome 5 Pro

It's inevitable that APEX will update the icon libraries in the next release. I expect these two:
- From Font Awesome 4 to Font Awesome 5 Free
- From Font APEX to Font APEX HD

Because APEX is pretty much redistributing Font Awesome, it has to use the free version...

This blog post explains how to use Font Awesome 5 Pro (https://fontawesome.com/pro) in APEX

Demo 1 (Usage in APEX): https://apex.oracle.com/pls/apex/f?p=1397
Demo 2 (Universal Theme Sample): https://apex.oracle.com/pls/apex/f?p=22375
GitHub: https://github.com/vincentmorneau/apex-fontawesome5

Download Steps

  1. Get a license for Font Awesome 5 Pro: https://fontawesome.com/pro
  2. Download these APEX compatibility files from Github
  3. Unzip Font Awesome 5 Pro (from step 1) into /dist/lib/fontawesome5 (from step 2)
  4. Zip the whole dist folder
  5. Upload the zip to your APEX web server
    • Example: Shared Components - Application Static Files: #APP_IMAGES#

Note: We have to do this because I can't distribute Font Awesome 5 Pro...

Option 1) SVG with JavaScript

  1. Reference these JavaScript files in your app
    • #APP_IMAGES#js/apex-fontawesome5#MIN#.js
    • #APP_IMAGES#lib/fontawesome5/svg-with-js/js/fontawesome-all#MIN#.js
    • #APP_IMAGES#lib/fontawesome5/svg-with-js/js/fa-v4-shims#MIN#.js
  2. Reference this CSS file in your app
    • #APP_IMAGES#css/apex-fontawesome5#MIN#.css

file-references-svg

Note: If your app shows flashing question marks as icons, it means that the icon you are using does not exist in Font Awesome 5.

broken-icons

Option 2) Web Fonts with CSS

  1. Reference this JavaScript file in your app
    • #APP_IMAGES#js/apex-fontawesome5#MIN#.js
  2. Reference these CSS files in your app
    • #APP_IMAGES#css/apex-fontawesome5#MIN#.css
    • #APP_IMAGES#lib/fontawesome5/web-fonts-with-css/css/fontawesome-all#MIN#.css

file-references-css

Usage

Basic Usage

Pick your icon here https://fontawesome.com/icons.
Use it in the appropriate icon CSS classes in APEX.

icon-css-classes-basic

Styles & Prefixes

Style Class
Solid fas
Regular far
Light fal
Brand fab

icon-css-classes-style

Icon Sizes

Size Class
0.75em fa-xs
0.875em fa-sm
1.33em fa-lg
2em through 10em fa-2x through fa-10x

icon-css-classes-size

Animated

Animation Class
Spin fa-spin
Pulse fa-pulse

icon-css-classes-spin

Font Awesome 5 Pro has great plans in the future and I believe it's worth it.

What do you think?