Since their introduction, I have always liked Font Awesome icons, and the new sharp icons are my favorite so far (it could be I was just tired of the rounded corners). Unfortunately, Avada does not support the latest iteration, the kit concept, or the Font Awesome plugin, and despite multiple feature requests, there doesn’t seem to be a change in sight.

So what to do? Well, I think I have found relatively easy solutions. This does require a pro account and the kit script to be added in your Code Fields (under Global Options > Advanced).

Add custom CSS to override FAL, FAR, and FAS

I found this to be the easiest and all-encompassing. If you are using the new kits, the font family is available as a variable, making it really easy to use in any custom style. I also added the Avada font size variable to pick up the font size they have set in the various elements.

.far{
  font:var(--fa-font-sharp-regular)!important;
  font-size: var(--awb-font-size)!important;
}
.fal{
  font:var(--fa-font-sharp-light)!important;
  font-size: var(--awb-font-size)!important;
}
.fas{
  font:var(--fa-font-sharp-solid)!important;
   font-size: var(--awb-font-size)!important;  
}

Use the code block to add the SVG or <i> code.

The traditional <i> code is easier to implement and style, but SVG can have some advantages.

<i class="fa-sharp fa-light fa-swatchbook fa-3x" style="color:var(--awb-color1)"></i>

The SVG can have some advantages in many scenarios. I use it as a column background with some custom CSS.

 .icon-white svg{
  fill:#fff!important;
  height:240px;
  width:240px;
  position:absolute;
  bottom:0;
  right:0;
  opacity:.1;
}

Originally published on April 1, 2023

In this story

flat-lay photo of Read Me. book beside cup and silver mug on table2 Code Snippets for Table of Contents
brown wooden letter i letterMy Discovery of Font Outlines

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.