Simplest way to add a custom icon to a Navbar menu item

Question

The Navbar module comes with some pre-set icons for common uses. They're fixed to the menu item names.

If you want different icons, or, to add icons to custom menu items or menu items provided by 3rd party modules, what's the simplest way that makes these new icons appear on pages using both the admin and main themes?

There's an issue in the Navbar queue for 3rd party module maintainers wanting to support Navbar icons out of the box, but it's not intended for site builders.

The ideal answer would:

• Work in both main and admin theme contexts without duplication (so, not just adding CSS to theme)
• Not cause the icons to fall off if the wording of their menu item labels is changed - in many organisations CSS styling and site structure will be handled by different people and should be independent of each other (this currently happens to Navbar default icons)

Answer 1

You can try to create custom module and implement hook_navbar() - for new items and hook_navbar_alter() - for already created items. In this hooks you can set custom css classes for items and attach you custom css file.

check /navbar/navbar.api.php file.

---

Looks like links came from navbar_menu_navigation_links(), they already have css class navbar-icon-<item_title>. You create custom css file in you module and add in hook_init(). Example of css styles you can get from navbar/css/navbar.icons.css or even copy it to your file and change if needed or add css for new items.