Probleem:
Probleem:Vandaag ben ik beziggeweest om onderhoud voor een WordPress website uit te voeren. Eerste stap was PHP 7.4 bijgewerkt naar 8.1. Daarna heb ik WordPress 5.8 bijgewerkt naar 6.4.2 en hetzelfde gedaan voor de plugins.
Binnen het maatwerk thema van de website werd ook gebruik gemaakt van Font Awesome 5. Al had ik het idee dat de notatie nog uit de tijd van Font Awesome 4 was. Van de webmaster had ik het verzoek gekregen om Font Awesome bij te werken naar versie 6 zodat er gebruik gemaakt kon worden van het nieuwe X icoon voor Twitter.
Upgraden van Font Awesome was zo gedaan. Gelukkig werkte de meeste icoontjes nog. Uitzondering was het zoekglas icon in de zoekbalk op de archiefpagina’s. Die werd niet meer ingeladen en als een vierkant blokje getoond.
Dit icoon werd via de volgende CSS toegevoegd:
.search:after {
content: "\f002";
font-family: "Font Awesome 6 Free";
color: black;
position: absolute;
}
De code van het icoontje was goed. Gecheckt op de website van Font Awesome.
Ik heb van alles geprobeerd:
- Icoon als afbeelding ingeladen
- Veel websites bezocht met mogelijke oplossingen en die geprobeerd
- Ander icoon
- Als SVG bestand ingeladen
Maar niets werkte.
Oplossing:
De oplossing bleek uiteindelijk heel simpel te zijn. Sinds Font Awesome 5 is de font-weight property verplicht. Toen ik font-weight:bold; toevoegde werd het icoontje weer getoond.
.search:after {
content: "\f002";
font-family: "Font Awesome 6 Free";
font-weight:bold;
color: black;
position: absolute;
}
Getest op:
WordPress 6.4.2 met Font Awesome 6.5.1