Back to Top

How to set logo in admin configuration tab in Magento 2

Updated 19 June 2024

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:

Searching for an experienced
Magento 2 Company ?
Find out More
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