Roots Discourse

ACF Menu Icons for Sage-Based Themes

Hello, everyone! Long time no see.

This morning I whipped up a quick Composer package for adding SVG icons to menu items in Sage-based themes using Advanced Custom Fields.

This package adds the following fields to each menu item on your site:

  • Icon (the SVG icon)
  • Hide Label? (Should the menu item label be hidden, just showing the icon?
  • Icon Position (Should the icon appear before or after the label?

For screen-reader and SEO reasons, “hiding” a label simply wraps it in Bootstrap’s sr-only class!

Check it out here:

Here’s a preview of how the fields look in on menu item:

2 Likes