Blog: https://vmorneau.me/fontawesome5/
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
The following steps are required because of the Font Awesome 5 Pro license.
I can't redistribute Font Awesome 5 Pro here, so you will have to download the files yourself and follow these steps:
- Get a license for Font Awesome 5 Pro: https://fontawesome.com/pro
- Download these APEX compatibility files from Github
- Unzip Font Awesome 5 Pro (from step 1) into
/dist/lib/fontawesome5
(from step 2) - Zip the whole
dist
folder - Upload the zip to your APEX web server
- Example: Shared Components - Application Static Files:
#APP_IMAGES#
- Example: Shared Components - Application Static Files:
Note: We have to do this because I can't distribute Font Awesome 5 Pro...
- 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
- Reference this CSS file in your app
#APP_IMAGES#css/apex-fontawesome5#MIN#.css
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.
- Reference this JavaScript file in your app
#APP_IMAGES#js/apex-fontawesome5#MIN#.js
- 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
Pick your icon here https://fontawesome.com/icons.
Use it in the appropriate icon CSS classes in APEX.
Style | Class |
---|---|
Solid | fas |
Regular | far |
Light | fal |
Brand | fab |
Size | Class |
---|---|
0.75em | fa-xs |
0.875em | fa-sm |
1.33em | fa-lg |
2em through 10em | fa-2x through fa-10x |
Animation | Class |
---|---|
Spin | fa-spin |
Pulse | fa-pulse |