How to change default icon for top level menu backend in Magento 2
Vinh Jacker | 12-06-2016
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 icons and menu for all of their extensions to make the interface unique with eye-catching visibility. However, this work may need some help with PHP files and non-savvy CMS users may face problems with the customization.
Table Content
Therefore, to help all store owners with the job of changing default icon for top level menu backend in Magento 2, following steps:
Step 1: Create the icon 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.lessfile 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
Related Post
Jacker is the Chief Technology Officer (CTO) at Mageplaza, bringing over 10 years of experience in Magento, Shopify, and other eCommerce platforms. With deep technical expertise, he has led numerous successful projects, optimizing and scaling online stores for global brands. Beyond his work in eCommerce development, he is passionate about running and swimming.
Related Post
Customize the welcome message on your store's homepage to provide a personalized touch for your customers. Improve the user experience with our step-by-step guide.
Configure Magento 2 Contact Form & Email: Detailed Guides
Configure the email address for your Magento 2 store's contact form and ensure that your customers can easily get in touch with you with this informative guide
How to Install Magento 2 with Sample Data
How to install Magento 2 with Sample Data. In this topic we will discuss about How to Install Magento 2 Step by Step in Manage Store topic
6 Steps To Stop Brute Force Attacks
How To Stop Brute Force Attacks in Magento 1, 2. In this topic we will discuss about How To Stop Brute Force Attacks in Manage Store topic
How to set Locale, Language, and Country in Magento 2
Setup Locale State Country in Magento 2 provides setup your store information on Locale Options that determines the timezone, language, country and the days.
Customize the welcome message on your store's homepage to provide a personalized touch for your customers. Improve the user experience with our step-by-step guide.
Configure Magento 2 Contact Form & Email: Detailed Guides
Configure the email address for your Magento 2 store's contact form and ensure that your customers can easily get in touch with you with this informative guide
How to Install Magento 2 with Sample Data
How to install Magento 2 with Sample Data. In this topic we will discuss about How to Install Magento 2 Step by Step in Manage Store topic
6 Steps To Stop Brute Force Attacks
How To Stop Brute Force Attacks in Magento 1, 2. In this topic we will discuss about How To Stop Brute Force Attacks in Manage Store topic
How to set Locale, Language, and Country in Magento 2
Setup Locale State Country in Magento 2 provides setup your store information on Locale Options that determines the timezone, language, country and the days.
& Maintenance Services
Make sure your store is not only in good shape but also thriving with a professional team yet at an affordable price.
Get Started