Webkul
Services
Technologies Bagisto QloApps
iOS Android SAP BigCommerce Wix
Trusted by
Samsung Intel Toyota Walmart Disney Nokia Nestlé Decathlon
See all customers
Back to Top
DEV

How to set logo in admin configuration tab in Magento 2

Hello Friends!!!
In this article, we will learn how we can add a logo in the admin configuration tab for our custom module.
To achieve the required result, we will follow the below steps:

1. We will create a CSS file named configtab.css inside the app/code/Vendor/Module/view/adminhtml/web/css directory.

.admin__page-nav.wk-config-tab-class._collapsed._show ._collapsible strong:before {
  content: "";
  background: url(../images/configtab/logo.png) no-repeat scroll 0 0 transparent;
  width: 100%;
  height: 26px;
  display: inline-block;
  vertical-align: bottom;
}
.admin__page-nav.wk-config-tab-class._collapsed._show ._collapsible strong {
  font-size: 0;
}

In the above CSS code, in background property, we have used logo image file URL. The logo.png is exist inside the app/code/Vendor/Module/view/adminhtml/web/images/configtab directory.

2. Now, we will add the .wk-config-tab-class CSS class in the class attribute of the tab tag in the app/code/Vendor/Module/etc/adminhtml/system.xml file as the following image:

way1
Add class in tab tag

Now, see the result in the following image:

result-2

Hope this will be helpful.
Thanks 🙂

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home