Wordpress 7.1
I just updated my Sparkling theme from version 2.4.9 to 2.6.9 and noticed my menus are now missing the Font Awesome icons. Here is the Navigation Label I am currently using in my menu structure:
<span class="fa fa-history fa-fw"></span> History
I also tried this with no success:
<i class="fa fa-history" aria-hidden="true"></i> History
How can I get these icons to show again in the menu?
Thank you in advance!
The update likely changed the Font Awesome version or stopped loading its CSS. Check which Font Awesome version Sparkling 2.6.9 is using; if it’s newer, the old fa fa-history class may no longer work. Make sure the correct Font Awesome stylesheet is loaded and use the matching icon class syntax.
Thanks for the clear report — and sorry for the trouble. Your markup is fine, so nothing you did caused this.
2.6.9 replaced the bundled Font Awesome 5.0.11 with a self-hosted Font Awesome 7.3.1, and to keep the download small the bundled copy is subsetted to only the glyphs the theme itself draws: the social icons, the pagination chevrons, the comment and calendar icons, roughly eighty in total. fa-history isn’t one of them, so the CSS rule and the glyph are both simply absent from the file now. That’s why neither the <span> nor the <i> version renders.
One thing to clear up, since it came up above: the class syntax is not the problem here. fa, fa-fw and fa-history are all still valid in Font Awesome 7 — a bare fa still resolves to the solid style, and fa-history is still carried as an alias. Your existing menu labels will work unchanged as soon as the complete set is loaded.
The theme has a filter for exactly this case. Add this to your child theme’s functions.php, or to a snippets plugin if you don’t have a child theme:
add_filter( 'sparkling_full_fontawesome', '__return_true' );
That swaps the subset for the complete Font Awesome 7, and your icons come back with no change to the menus themselves.
The reason it’s opt-in rather than the default is weight: the full set is around 330 KB of font files against a few kilobytes for the subset, and most sites never use an icon beyond the ones the theme already draws. Yours does, so the filter is the right call.
One footnote for when you add more icons later. A number of names changed in Font Awesome 6, with the old names kept as aliases — which is why fa-history still works. If an icon ever refuses to show, check its current name on fontawesome.com; this one is now fa-clock-rotate-left.
Following up, because this deserved a real fix rather than a workaround.
The cause was the icon subsetting introduced in 2.6.7. You went from 2.4.9 straight to 2.6.9, so it arrived along with everything else in that jump. The bundled Font Awesome carries only the 93 glyphs the theme draws itself, and fa-history is not one of them — so there was neither a CSS rule nor a glyph for it to render. Your markup was never the problem: fa, fa-fw and fa-history are all still perfectly valid.
Until the next release is out, the filter from my earlier reply is still the way to bring them back:
add_filter( 'sparkling_full_fontawesome', '__return_true' );
The next release, 2.6.11, makes that unnecessary. The theme now reads the icons used in your menus and loads the complete library by itself when one of them is not in the bundled set. Menus like yours recover on the next page load — no filter, no setting to find, and no change to your menu labels. I tested it against your exact markup, both the <span class="fa fa-history fa-fw"> version and the <i> one, and the icon renders.
There is also a new Font Awesome icons setting under Appearance → Customize → Content Options, for icons the menu scan cannot see: ones in a widget, in post content, or added by a page builder. It is set to Automatic by default, and the filter still overrides everything.
Sites that only use the icons the theme itself displays keep the small bundle, so the page-weight saving that the subsetting bought is not handed back to get your icons working.
One note for later: a number of icon names changed in Font Awesome 6, with the old names kept as aliases, which is why fa-history still works. If an icon ever refuses to appear, check its current name on fontawesome.com — this one is now fa-clock-rotate-left.
I will post here again once 2.6.11 is available on WordPress.org.
Sorry for the slow follow-up on this.
Sparkling 2.6.11 is now available on WordPress.org, and you may well have updated already. With it, your menu icons should show again on their own: the theme detects the icons used in your menus and loads the full Font Awesome library when needed. Your existing menu labels work as they are.
If you added the sparkling_full_fontawesome filter from my earlier reply, it’s safe to keep, but you can also remove it now.
If any icon still doesn’t appear after updating, let me know which one and I’ll take a look.
Thank you for reviewing and responding to my topic.
I just updated the Sparkling theme to version 2.6.11 and my menu icons are showing again.
Thanks again for your help!