Change Default Font Icon in Magento2 Admin Menu

adminmenumagento2

I need to add font icon in the admin menu.

Like all the core magento 2 menus, by default it shows the hexagonal icon for custom module menu, how can I change it?

enter image description here

Best Answer

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.

  1. 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

Related Topic