Important to know when updating Font Awesome to version 6

Font Awesome logo.Today I updated a WordPress site with a custom theme to make it work correctly with PHP 8.1 and WordPress 6.4.2.

One of the steps I took was to upgrade from Font Awesome 5 to 6. Although some of the code still looked like Font Awesome 4.

Problem:

All icons still worked after the upgrade. One exception was the search glass icons in the input fields on the archive pages.

In Firefox, these were displayed as a square with the code f002 in it. In Chrome, it was just a white square.

This CSS code was used:

.search:after { 
content: "\f002"; 
font-family: "Font Awesome 6 Free"; 
color: black; 
position: absolute;
}

Solution:

The solution was quite simple. Apparently, since Font Awesome 5, you are required to use the font-weight property.

The new CSS will look like this:

.search:after { 
content: "\f002"; 
font-family: "Font Awesome 6 Free"; 
font-weight:bold; 
color: black; 
position: absolute;
}

Now the icons in the input fields were also displayed correctly again.

A handy plugin for loading Font Awesome icons for your WordPress website is the official Font Awesome plugin.

Laat een reactie achter

Your email address will not be published. Required fields are marked *

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.