Magento 2 : How I can change the default font Icon in menu admin for custom module?
1. Create Icon
By default magento 2 add custom default icon for you 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 which 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 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 http://ibnab.com/en/blog/magento-2/magento-2-backend-how-to-create-custom-menu-in-admin-and-change-default-font-icon
I tried above solution but it not worked for me. so i tried to put _module.less
file in
vendor/magento/theme-adminhtml-backend/Your_Module/web/css/source
Direcrtory. and it works for me.
This is not recommended but i didn't find any other solution for this. so i try this solution. and it works. check the following file for make sure it work:
pub/static/adminhtml/Magento/backend/en_US/css/styles.less
Where you should find a line like this:
@import '../Your_Module/css/source/_module.less';
Above mentioned answer are worked the different folders like lib
, design
.
So we have only worked the custom extension files. The step are:
1) you have create the menu.xml
file for Package_Modulename/etc/adminhtml
. Code are
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
<menu>
<add id="Package_Modulename::package_menu" title="package name" module="Package_Modulename" sortOrder="70" resource="Package_Modulename::package_menu"/>
<add id="Package_Modulename::menu_config" title="Configuration" translate="title" module="Package_Modulename" sortOrder="1" parent="Package_Modulename::package_menu" resource="Package_Modulename::menu_config"/>
</menu>
</config>
2) Create font icon of that .svg icon with help of IcoMoon.io. More details Documents
3) Create the default.xml
file for Package_Modulename/view/adminhtml/layout
. Coding are:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Package_Modulename::css/icon.css"/>
</head>
</page>
4) Create the fonts
folder in Package_Modulename/view/adminhtml/web
and paste the icon files. Files are
icon.eot
icon.svg
icon.ttf
icon.woff
5) Create the icon.css
file for Package_Modulename/view/adminhtml/web/css
. Code are
@font-face {
font-family:'Packagename';
src:url('../fonts/icon.eot');
src:url('../fonts/icon.eot?#iefix') format('embedded-opentype'),url('../fonts/icon.woff') format('woff'),url('../fonts/icon.ttf') format('truetype'),url('../fonts/icon.svg') format('svg');font-weight:normal;font-style:normal
}
.admin__menu .level-0.item-package_menu > a::before {
content: '\e900';
font-size: 3.0rem;
padding-top: 0.1rem;
font-family:'Packagename';
}
Note: Above coding
content: '\e900';
check the value. Please check font package file (demo.html
). Refer the screen shot: