1. Create Icon
By default, Magento 2 add a custom default icon for your module.
But you can add your custom icon to your custom admin module menu.
Create custom icon .svg with Inkscape software (open source soft for
creating vector try man !).
Create font icon of that .svg icon with help of IcoMoon.io
Go to lib/web/fonts
create your module folder. example Package
and paste all files obtained/exported from IcoMoon.io.
- injected it inside Magento 2 without touching the core files:
Supposed your module name is
Package_Modulename
go to app/design/adminhtml/Magento/backend
create folder with name Package_Modulename/web/css/source/
Create _module.less
file under the source folder
It will seem like Package_Modulename/web/css/source/_module.less
Now inside your file _module.less add this lines :
@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";
}
item-modulename : here modulename
is comes from etc/adminhtml/menu.xml
<menu>
<add id="Package_Modulename::modulename" title="Modulename" module="Package_Modulename" sortOrder="40" resource="Package_Modulename::modulename"/>
</menu>
see the id Magento take the last word after ':: ' here is modulename
and add the name to li
html parent of a
tag the class result is class='item-modulename parent level-0'
For more step by step understanding, you can refer to http://ibnab.com/en/blog/magento-2/magento-2-backend-how-to-create-custom-menu-in-admin-and-change-default-font-icon
Best Answer
Include link for the font in header of Magento using the below-mentioned code