elementor4fun-logo
Last update: February 1, 2022

What you need to know about Font Awesome in Oxygen

Oxygen includes more than 600 icons from Font Awesome 5. If it's enough in most case, you will quickly find out that some icons are missing.
Actually many icons are missing, as there are exactly 1608 free icons available in the Font Awesome website.

Adding the missing Font Awesome icons

By chance we can easily add custom Icon Sets in Oxygen.

If you want to add the full Font Awesome set, you can create your own set or simply download this SVG file:

fontawesome5.15.4.zip

Unpack the archive and install the svg file as a new Icon Set. Then all the missing icons will be finally available:

How to load Font Awesome in the frontend

Oxygen doesn't load the full set in the frontend.

When you use the Icon element, the icon will be inserted in SVG format directly in the HTML page:

If you don't want to use the Icon element but you need to use the traditional way by using the CSS class, you must load Font Awesome in the frontend.

If not, you will see that

instead of

when you type I <i class="fas fa-heart"></i> OXYGEN4FUN

To load Font Awesome 5, you can follow Sridhar's tutorial or you can use my plugin to load the file locally:

Load FontAwesome5 Locally v1.0

Font Awesome 4

Note that Font Awesome 5 is quite big. It's a 1.08MB JS file !
If you don't use the new icons, you can load Font Awesome 4 instead, as it's smaller. Here is another little plugin, that loads the assets locally:

Load FontAwesome4 Locally v1.0

Or once again, you can simply follow this other Sridhar's tutorial: https://sridharkatakam.com/using-font-awesome-wordpress/

closealign-justifychevron-downcaret-up