15

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

6 Answers 6

25

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

9
  • BTW it should be .lib-font-face or .font-face?
    – MagePsycho
    Mar 27, 2016 at 12:07
  • I m not sure how this worked for you? which gives .font-face is undefined error. Use .lib-font-face instead.
    – MagePsycho
    Mar 27, 2016 at 19:13
  • I had used it into beta version. I am doing it now into stable and let you know. Mar 29, 2016 at 6:27
  • it is not works for me.
    – MaYaNk
    Jun 9, 2016 at 10:28
  • Can you please advice in detail, what thing do you face there? Jun 10, 2016 at 8:46
6

I tried the above solution but it did not work for me. so I tried to put _module.less file in

vendor/magento/theme-adminhtml-backend/Your_Module/web/css/source

Directory. 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 to make sure it works:

 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';
2
  • 1
    Read this post, we describe in steps how to change in an easy way: uecommerce.com.br/… Thanks Nov 18, 2016 at 16:42
  • The vendor folder is subject to a lot of change, as soon as you do a Magento security patch, this change will vanish if using this route. And if you use a deploy system, this change will never appear.
    – evensis
    Jan 1, 2019 at 13:38
5

Above mentioned answers are worked the different folders like lib, design.

So we have only worked on the custom extension files. The step is:

  1. you have create the menu.xml file for Package_Modulename/etc/adminhtml. Code is

  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:

  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

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

enter image description here

2
  • It worked me and it's very solution when have a sass implementation in frontend and not like compile less in admin area.
    – jruzafa
    Mar 29, 2018 at 7:23
  • @jruzafa, Above comment does not understand. Please comment once again with detailed.
    – Sankar_k
    Mar 29, 2018 at 9:42
0

Another "hackish" way to do it is to add a transparent png image in the vendor/modulename/view/adminhtml/web/images/icon.png and a few css lines in the vendor/modulename/view/adminhtml/web/css/styles.css:

/* you may have to adjust the selector a bit*/
.admin__menu .item-{modulename}-menu.last.level-0 > a:before {
    background: url("../images/icon.png") center center no-repeat;
    content: "";
    background-size: auto 95%;
}

.admin__data-grid-wrap .data-grid .data-grid-draggable .data-row .data-grid-thumbnail-cell .admin__control-thumbnail > img:before {
    border:none;
}

I personally had difficulties generating the webfonts and to be honest I find that approach a bit too much for an admin icon (1kb image).

0

You could also look for an admin icon that already exists and matches your needs inside the Iconography in Magento Admin Pattern Library and then look for the corresponding LESS variable at vendor/magento/theme-adminhtml-backend/web/css/source/variables/_icons.less file.

If you find something useful in this library, create your LESS file directly inside your module (no need for an adminhtml theme) at Vendor/ModuleName/view/adminhtml/web/css/source/_module.less and fill it with following content:

.admin__menu .item-modulename.parent.level-0 > a:before {
  content: @icon-tool__content; // Or whatever icon variable you want
}

Then, you must remove pub/static/adminhtml/Magento/backend/en_US/css/styles.css file, and reload the admin page

0

Step 1) Create the CSS file first in view/adminhtml/web/css/ in your extension: File path : app/code/Vendor/Module/view/adminhtml/web/css/adminhtml.css

.admin__menu .level-0.item-menuid > a:before {
    content: url('../images/icon-devline.png'); //content: "\0041";
}

menu id from menu.xml file

Step 2: Create default.xml file File path : app\code\Vendor\Module\view\adminhtml\layout\default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Vendor_Module::css/adminhtml.css"/>
    </head>
</page>

step 3: run below command

php bin/magento setup:static-content:deploy --area adminhtml

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.