In this post, you will know how can you change the default font icon in Magento 2 admin menu? Default Magento includes a “hexagonal icon” for Magento 2 admin menu. If you want to add your brand icon or other then you can follow the steps given below:
Here are some steps to add a custom icon in Magento 2 admin menu:
Step 1: Create a menu.xml file and add your custom menu
app/code/Webiators/AdminMenuIcon/etc/adminhtml/menu.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?xml version="1.0"?> <!-- /** * * @category Webiators * @package Webiators_AdminMenuIcon * @author Webiators Team * @copyright Copyright (c) Webiators Technologies Private Limited. ( https://store.webiators.com ). */ --> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd"> <menu> <add id="Webiators_AdminMenuIcon::wtmenu" title="Webiators" module="Webiators_AdminMenuIcon" sortOrder="10" resource="Webiators_AdminMenuIcon::wtmenu"/> </menu> </config> |
Step 2: Create a custom CSS file to app/code/Webiators/AdminMenuIcon/view/adminhtml/web/css/custom.css
|
1 2 3 4 5 6 7 8 9 |
.admin__menu .level-0.item-wtmenu > a:before { content: ''; background-image:url("../images/icon.png"); background-size: contain; background-repeat: no-repeat; background-position: center; } |
Step 3: Upload your menu icon to app/code/Webiators/AdminMenuIcon/view/adminhtml/web/images
Step 4: Create app/code/Webiators/AdminMenuIcon/view/adminhtml/layout/default.xml file with the following code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?xml version="1.0"?> <!-- /** * * @category Webiators * @package Webiators_AdminMenuIcon * @author Webiators Team * @copyright Copyright (c) Webiators Technologies Private Limited. ( https://store.webiators.com ). */ --> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <css src="Webiators_AdminMenuIcon::css/custom.css"/> </head> </page> |
Step 5: Now we need to run the following commands and see the menu icon
|
1 2 3 |
php bin/magento setup:static-content:deploy -f en_US php bin/magento cache:flush php bin/magento cache:clean |
Thank You! 🙂
Read More
