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...

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 :-)

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

1: 2: 3:

1: 2: 3:

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

Region

Identification
	Sequence	110
	Title	Font example 1
	Type	Static Content
Source
	Source Type	STATIC_TEXT
	Region Source	<table> <tr> <td style="width: 100px;"> <section style="text-align: center; height: 90px; margin-right: 6px; padding: 5px; background-color:#004A60; overflow: hidden;"> <div style="position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #FFFFFF; font-size:10pt;"> <div> <span style="font-family:helvetica,arial,sans-serif; font-weight:bold; font-size: 3.8em;">A</span> </div> Label A </div> </section> </td> <td style="width: 100px;"> <section style="text-align: center; height: 90px; padding: 5px; background-color:#004A60; overflow: hidden;"> <div style="position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #FFFFFF; font-size:10pt;"> <i class="fawe fawe-fire-extinguisher" style="margin-bottom: 3px; font-size: 3em;"></i><br/> Label B </div> </section> </td> </tr> </table>

Region

Identification
	Sequence	120
	Title	Font example 2
	Type	Static Content
Source
	Source Type	STATIC_TEXT
	Region Source	<table> <tr> <td style="width: 100px;"> <section style="text-align: center; height: 90px; margin-right: 6px; padding: 5px; background-color:#004A60; overflow: hidden;"> <div style="position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #FFFFFF; font-size:10pt;"> <div> <i class="fawe fawe-spinner" style="color: #004A60; margin-bottom: 3px; font-size: 3em;"></i> <span style="font-family:helvetica,arial,sans-serif; font-weight:bold; font-size: 3.8em; position: absolute; -webkit-transform: translate(-37px, 9px); -ms-transform: translate(-37px, 9px); transform: translate(-37px, 9px);">A</span> </div> Label A </div> </section> </td> <td style="width: 100px;"> <section style="text-align: center; height: 90px; padding: 5px; background-color:#004A60; overflow: hidden;"> <div style="position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #FFFFFF; font-size:10pt;"> <i class="fawe fawe-fire-extinguisher" style="margin-bottom: 3px; font-size: 3em;"></i><br/> Label B </div> </section> </td> </tr> </table>

Region

Identification
	Sequence	40
	Title	Fun with Spinners
	Type	Static Content
Source
	Source Type	STATIC_TEXT
	Region Source	Simple animations with fa(we)-spin and some padding:<br/> <br/> <table> <tr> <td style="width: 200px;"> <div style="margin-bottom: 20px;"> <span style="margin-right: 20px;">1:</span> <i class="fawe fawe-spinner fawe-spin" style="font-size: 2em;"></i> </div> <div style="margin-bottom: 20px;"> <span style="margin-right: 20px;">2:</span> <i class="fawe fawe-spinner fawe-spin" style="padding-bottom: 20px; font-size: 2em;"></i> </div> <div style="margin-bottom: 20px;"> <span style="margin-right: 20px;">3:</span> <i class="fawe fawe-spinner fawe-spin" style="color: white; padding-bottom: 20px;"> <i class="fawe fawe-spinner fawe-spin" style="color: black; padding-bottom: 20px; font-size: 2em;"></i> </i> </div> </td> <td style="width: 200px;"> <div style="margin-bottom: 20px;"> <span style="margin-right: 20px;">1:</span> <i class="fawe fawe-spinner fawe-spin" style="border: 1px solid red; font-size: 2em;"></i> </div> <div style="margin-bottom: 20px;"> <span style="margin-right: 20px;">2:</span> <i class="fawe fawe-spinner fawe-spin" style="border: 1px solid red; padding-bottom: 20px; font-size: 2em;"></i> </div> <div style="margin-bottom: 20px;"> <span style="margin-right: 20px;">3:</span> <i class="fawe fawe-spinner fawe-spin" style="color: white; border: 1px solid red; padding-bottom: 20px;"> <i class="fawe fawe-spinner fawe-spin" style="color: black; border: 1px solid blue; padding-bottom: 20px; font-size: 2em;"></i> </i> </div> </td> </tr> </table>