Using Font Awesome Sharp Icons

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;
}