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.