How to change default icon for top level menu backend in Magento 2

magento-2-tutorial
how-to
default-icon
top-level-menu-backend

Have you ever wondered about how to customize the icon in the top level menu in backend? Actually, you can change the default icon when adding your custom menu. Some companies and developers will also like to adapt their own icon and menu for all of their extensions to make the interface be unique with eye-catching visibility. However, this work may need some help with PHP file and non-savvy CMS users may face problems with the customization.

Therefore, to help all store owners with the job of changing default icon for top level menu backend in Magento 2, I will guide you with this simple tutorial. Let’s start!

Change default icon for top level menu backend

  • Step 1: Create the folder file
  • Step 2: Insert the script.

Step 1: Create the folder file

  • Go to lib/web/fonts
  • Create your module folder
  • Injected it inside Magento 2 without touching the core files
  • Go to app/design/adminhtml/Magento/backend
  • Create folder dubbed Package_Modulename/web/css/source/
  • Create _module.less file in a source folder.

Step 2: Insert the script.

  • Add the following lines inside file _module.less:
@modulename-icons-admin__font-name-path: '@{baseDir}fonts/modulename/icomoon';
@modulename-icons-admin__font-name : 'modulename';
.font-face(
@family-name:@modulename-icons-admin__font-name,
@font-path: @modulename-icons-admin__font-name-path,
@font-weight: normal,
@font-style: normal
);
.admin__menu .item-modulename.parent.level-0 > a:before {
  font-family: @modulename-icons-admin__font-name;
  content: "\e800";
}
  • Save it and you have finished managing the top level menu Backend in Magento 2.

Please leave comments if you have any questions, feedbacks.

Comments for How to change default icon for top level menu backend in Magento 2

You also may like these Magento 2 Extensions

One Step Checkout

$199
18 reviews

Layered Navigation

$99
11 reviews

SEO

FREE
5 reviews

Shop By Brand

$99
no review