Categories


Archives


Recent Posts


Categories


Magento 2: Creating a Custom Admin Menu Item Icon

astorm

Frustrated by Magento? Then you’ll love Commerce Bug, the must have debugging extension for anyone using Magento. Whether you’re just starting out or you’re a seasoned pro, Commerce Bug will save you and your team hours everyday. Grab a copy and start working with Magento instead of against it.

Updated for Magento 2! No Frills Magento Layout is the only Magento front end book you'll ever need. Get your copy today!

Two good Stack Exchange answers from Raphael at Digital Pianism covering how to add a custom icon to your Magento Admin Menu Items.

In short – these menu items use a custom font character, defined in svg file that’s (somehow? via LESS CSS?) converted to an embedded OpenType font. This custom font uses the Private Use Area of Unicode to define a custom code point for the new font character. The <li/> of each menu item gets its own CSS class, and that classes uses the content style to set the unicode character as the <li/>’s content.

So, high level, if you want to add your own custom icon you need to

  1. Use a program like IcoMoon to generate an SVG version of the font-character
  2. Create four other font formats (maybe via generation, maybe on your own
  3. Add a LESS CSS rule to include your custom font
  4. Add a LESS CSS rule to add the Unicode character as a content character

I will not be surprised if many extension developers skip all this and end up jamming an image in there instead.

Also, tell me again how being a developer is blue collar/HVAC type work?

Copyright © Alan Storm 1975 – 2018 All Rights Reserved

Originally Posted: 9th May 2016