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?
Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this community1. 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.
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
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';
Above mentioned answers are worked the different folders like lib
, design
.
So we have only worked on the custom extension files. The step is:
you have create the menu.xml
file for Package_Modulename/etc/adminhtml
. Code is
Create font icon of that .svg icon with help of IcoMoon.io. More details Documents
Create the default.xml
file for Package_Modulename/view/adminhtml/layout
. Coding are:
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
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:
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).
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
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";
}
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