Add icons or images to tabs

Community Usage questions
1

How can I add icons or images to tabs? I can add it nearly everywhere except in tabs. The same CSS commands that works in other places won’t work here.
For example:
background-image:url(’\Icons\cross.png’);

2

Tab buttons are not accessible within the tabs’ scope, you need to target them from the parent’s css:

> inner > .navigation > .tablink:nth-child(1) {
  background:red
}
1 Like
3

Thanks for the response
I guess you mean this.
I created a panel, added 2 tabs. I would expect the tab number one change the background color, but nothing happens .
Also tried tab id and other background colors etc with no results.

image
image1143×384 35.2 KB

4

I assumed you were using v1, you’ll need to adjust the css selectors (you can use the browser’s devTools to inspect the widget’s structure), If I remember correctly replacing inner with .panel should do.

5

Sorry, doesn’t seem to work either

image
image790×294 25.4 KB

6 
> .panel > .navigation .tablink:nth-child(1) a {
  background:red
}
7

Thanks! That works nicely.
How can I change the background color or the icon when the tab is active?
I know how to change the font color with this:
–color-raised:rgba(30,50,80,1);
But can’t get it with background.
Obviously using icons would be nice to know how to change the icon or the icon filter when a tab is active.

8

.tablink elements have an extra class "on" when active, so you’d write `.tablink.on.

9

Thanks, can you add an example as you did with this?

.panel > .navigation .tablink:nth-child(1) a {
background:red
}

10

Yes:

.panel > .navigation .tablink.on:nth-child(1) a {
background:red
}