Skip to Main Content

Font Awesome

http://fortawesome.github.io/Font-Awesome/

In the latest Apex versions, you have to choose between either Font Awesome or Font APEX to use in a theme, but you can use both if you want.
Maxime Tremblay has a nice blog post on that topic: http://max-tremblay.blogspot.com/2018/01/use-font-apex-and-font-awesome.html. I have used his method for my site as well, so I'm also using the fawe prefix in these examples.

APEX 5.0: Upgrade to the newest FontAwesome Icon Library
Oracle APEX 5.0 ships with FontAwesome version 4.2.0 which will automatically be loaded if your application is using the Universal Theme. This makes it super easy to add nice looking icons to your buttons, lists and regions. But how can you integrate the most current version of FontAwesome if you have found an icon on the FontAwesome Icon Gallery which is not already part of 4.2.0? Actually that’s pretty straight forward!

Info on how to do this: http://www.inside-oracle-apex.com/apex-5-0-upgrade-to-the-newest-fontawesome-icon-library/

Note: Font Awesome version 4 is quite different from version 5, so work may be required to upgrade to that version - see https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4 for details.

Note: In Apex 5.1 and up, the fa-2x/fa-3x/etc classes don't seem to work anymore. The font sizes are overruled by a "font-size: 14px;" entry in core.min.css. Seems like a bug to me; I guess caused by the introduction of Font APEX icon library, since the fa-2x/3x/etc classes do work for those icons. I've fixed it here by adding some css in the element itself, but of course that's not very elegant...

Combining fonts

Sometimes you want to combine Font Awesome with other fonts, e.g. when you need alphanumeric characters.

In Example 1 below, the "quick-and-dirty" approach causes the A (and its label) to be placed too high, compared to the B. Also, this will look slightly different in various browsers - and probably none of them will look OK.

In example 2, I solved this by using an "invisible" Font Awesome character, so that everything (i.e. the label) is placed in the correct spot. Then the A is placed on top of that.
Not the most elegant solution maybe, but this was the only trick I could think of that gets the label in the correct place in all browsers. The position of the A relative to the label is a bit browser-dependent, but close enough so as not to bother me too much :-)

Font example 1

A
Label A

Label B

Font example 2

A
Label A

Label B

Fun with Spinners

Simple animations with fa(we)-spin and some padding:

1:
2:
3:
1:
2:
3:

Resources

Emma kindly suggested this as a resource of fonts that are free for commercial use; you may want to check it out if you need some fresh fonts: 70+ Best Free Fonts for Designers – for Commercial Use in 2023

Code

Region

Identification
Sequence
Title
Type
Source
Source Type
Region Source

Region

Identification
Sequence
Title
Type
Source
Source Type
Region Source

Region

Identification
Sequence
Title
Type
Source
Source Type
Region Source