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:

Now, see the result in the following image:

Hope this will be helpful.
Thanks 🙂

Be the first to comment.