/   /   /  Magento 2 Backend : How to create custom menu in admin and change default font icon

Note:

For more extensions and themes visit our store

Magento 2 Backend : How to create custom menu in admin and change default font icon

According to the data in front of us, a Magento2 team ,thought a lot about finding solutions to reduce the coherent between the various parts of the system ,  and think about how segment the configuration files, first to not fall into the same first version problems, sometimes you find in front of you a huge file nested and difficult to reading and editing, and secondly to focus all his art in his specialty .
In Backend now we have for example the menu.xml for creating your custom menu in left side of Magento 2 admin .

We consider already you started your custom module ! Ok inside etc/adminhtml create the file menu.xml and put :

  1.  
  2. <?xml version="1.0"?>
  3. <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../Backend/etc/menu.xsd">
  4.   <menu>
  5.    <add id="Ibnab_MageUnslider::mageunslider" title="Mage UnSLider" module="Ibnab_MageUnslider" sortOrder="11" resource="Ibnab_MageUnslider::mageunslider"/>
  6.    <add id="Ibnab_MageUnslider::mageunslider_mageunslider" title="Slider" module="Ibnab_MageUnslider" sortOrder="11" parent="Ibnab_MageUnslider::mageunslider" resource="Ibnab_MageUnslider::mageunslider_mageunslider"/>
  7.     <add id="Ibnab_MageUnslider::mageunslider_sliders" title="Manage Sliders" module="Ibnab_MageUnslider" sortOrder="11" parent="Ibnab_MageUnslider::mageunslider_mageunslider" action="mageunslider/sliders" resource="Ibnab_MageUnslider::mageunslider_sliders"/>
  8.   </menu>
  9. </config>
  10.  

Ok almost now you are finished but what is that? , simple the first line :

  1. <add id="Ibnab_MageUnslider::mageunslider" title="Mage UnSLider" module="Ibnab_MageUnslider" sortOrder="11" resource="Ibnab_MageUnslider::mageunslider"/>
  2.  

Is the root parent of your custom menu because is  not related to any parent,  this first tag is your root , try to find a propriety parent ? , the title equal what you want show as title for root tag , id  need be unique  , the resource you needed inside acl.xml (when you want manage permission for your module ) , magento show in the left for navigation like sales , products ...

second :

  1. <add id="Ibnab_MageUnslider::mageunslider_mageunslider" title="Mage UnSlider" module="Ibnab_MageUnslider" sortOrder="11" parent="Ibnab_MageUnslider::mageunslider" resource="Ibnab_MageUnslider::mageunslider_mageunslider"/>
  2.  

Is a child of the to id  Ibnab_MageUnslider::mageunslider,  if you see parent="Ibnab_MageUnslider::mageunslider" ; you can consider as container for your links 

Third :

  1. <add id="Ibnab_MageUnslider::mageunslider_sliders" title="Manage Sliders" module="Ibnab_MageUnslider" sortOrder="11" parent="Ibnab_MageUnslider::mageunslider_mageunslider" action="mageunslider/sliders" resource="Ibnab_MageUnslider::mageunslider_sliders"/>
  2.  

Wow finaly your click-able link , it's the child of container  Ibnab_MageUnslider::mageunslider_mageunslider , with  propriety action="mageunslider/sliders" ,
the  mageunslider is the fontName of admin you can find in etc/adminhtml/routes.xml , sliders is a folder inside Controller/Adminhtml , magento give you the default action Index.php (the file contain the execute()  function) , but you can add the name explicitly like action="mageunslider/sliders/edit"

you can create your controller and layout and other part for showing the result in content container for admin.

 

But the big question is How I can change the default font Icon in menu admin :

1 – Graphic work
Magento 2 adding by default custom icon when you add your custom menu but many company and developers prefer add custom menu for bundled all him extensions inside this menu, for cool visibility .
 We stared now by creating custom icon example .svg with inkscape (open source soft for creating vector try man !)    , Now go IcoMoon.io and download custom icon .svg open in inkscape resize you icon to this and save your icon with .svg , return  IcoMoon.io upload your icon and export font .

Now you have a zip file with all font and demo for how use copy (icomoon.eot, icomoon.svg ,icomoon.ttf , icomoon.woff) go to lib/web/fonts create your folder in our example Ibnab and paste all docs , woooooooooow , we finish the part graphic design .

2 – injected him inside Magento 2 without touching the core files:
we want add  this icon in admin side ok your module is Ibnab_Unislider , go to app/design/adminhtml/Magento/backend and create folder with name  Ibnab_Unislider and inside him create folder with name web and inside web create css and inside css create source and inside source create file _module.less you have now Ibnab_Unislider /web/css/source/_module.less

Why we create this file ? Simple because we won't touching the core file , for that we use the default technique of Magento 2 , if you go to styles.less inside  app/design/adminhtml/Magento/backend\web\css you will find inside him //@magento_import "source/_module.less"; // import theme styles
that equal go to all less inside folder like Magento_Catalog or our folder  Ibnab_Unislider and import all files inside web/css/source with name _module.less and include to styles.less the base file of all adming part (that cool the directive is related to Magento 2 any relation with default less technique) .

Now inside your file _module.less add this lines :

  1.  
  2. @ibnab-icons-admin__font-name-path: '@{baseDir}fonts/Ibnab/icomoon';
  3. @ibnab-icons-admin__font-name : 'Ibnab';
  4. .lib-font-face(
  5. @family-name:@ibnab-icons-admin__font-name,
  6. @font-path: @ibnab-icons-admin__font-name-path,
  7. @font-weight: normal,
  8. @font-style: normal
  9. );
  10. .admin__menu .item-mageunslider.parent.level-0 > a:before {
  11.   font-family: @ibnab-icons-admin__font-name;
  12.   content: "\e800";
  13. }
  14.  
  15.  

what's this ?! We import our fonts whit .less you can declare variable and use function ,

@ibnab-icons-admin__font-name-path: '@{baseDir}fonts/Ibnab/icomoon';
@ibnab-icons-admin__font-name : 'Ibnab';

our path and our font name now we use the function :
.lib-font-face(
@family-name:@ibnab-icons-admin__font-name,
@font-path: @ibnab-icons-admin__font-name-path,
@font-weight: normal,
@font-style: normal
);

and we finish with :
.admin__menu .item-mageunslider.parent.level-0 > a:before {
  font-family: @ibnab-icons-admin__font-name;
  content: "\e800";
}

for our custom class . the other question how Magento 2 create this class simple :
are your if you go to menu.xml and see the root tag add

  1. <add id="Ibnab_MageUnslider::mageunslider" title="Mage UnSLider" module="Ibnab_MageUnslider" sortOrder="11" resource="Ibnab_MageUnslider::mageunslider"/>
  2.  

see the id Magento take the last word after ':: ' here is  mageunslider and add the name to <li> html parent of <a > tag the class result is class='item-mageunslider  parent  level-0'

now refresh the page admin yes any change , you  need processed LESS how this ?

The architecture of Magento 2 take all less and preprocessed  inside var/view_preprocessed  after that publish all  public files in our example inside pub/static/adminhtml/Magento/backend/en_US
for that take this 3 commands(from root magento2):
rm -rf var/view_preprocessed/
rm -rf pub/static/adminhtml
 php bin/magento setup:static-content:deploy

 


the last is for deploy (that is from server side in mode dev) ..
now refresh the page admin yeeeeeees you have you custom icon , if you go to pub/static/adminhtml/Magento/backend/en_US you will all css fonts and js results ..

Comments

Related Posts

make your store more efficient

Solving problems. With open source technology. Professional results. That’s what makes Ibnab your best choice

IBNAB is a company made of a group of professionals whose work is providing secure open source solutions. Our company strives for reaching magnificent results with each experience and provides professional open source solutions that cover every part of the business process.

Newsletter