0

I want to add my company logo to my custom module configuration tab in admin.

Here is code of tab:

<tab id="mytab" translate="label" sortOrder="110">
    <label>My Label Here</label>
</tab>

2 Answers 2

2

Alternatively add the image via css.

system.xml:

<tab id="mytab" translate="label" sortOrder="1000">
        <label>My Label Here</label>
        <class>my-tab</class>
 </tab>

your adminhtml.css

.config-nav .my-tab .admin__page-nav-title::before {
    content: '';
    background-image: url("../images/your_logo.png");
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 0 0;
    height: 30px;
    position: absolute;
    width: 30px;
    top: 11px;
}

.config-nav .my-tab .admin__page-nav-title strong {
    margin-left: 40px;
}
2
  • How i can add this css in adminhtml by custom Module?
    – Waqar Ali
    Sep 1, 2020 at 6:21
  • In Magento 2.4.1, you need to specify the class attribute in the tab node, like: <tab id="mytab" translate="label" sortOrder="1000" class="my-tab"><label>My Label Here.net</label></tab>
    – Ferrmolina
    Oct 19, 2020 at 16:23
1

You can set your logo url to tab label like this:

<tab id="mytab" translate="label" sortOrder="110">
    <label><![CDATA[<img src="http://logos-download.com/wp-content/uploads/2016/09/Magento_logo.png" width="100px"/>]]></label>
</tab>

Output:

enter image description here

2
  • How can I give the local media URL?
    – Butterfly
    Dec 31, 2018 at 7:07
  • This doesn't work in Magento 2.3.3 onwards
    – MagePsycho
    Oct 27, 2019 at 7:46

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.