Docs

[Jeroen]

Hi there,

I want to add an icon before the text in the tab of a tabbed content block. When i add it by using the li tag, it deletes itself when publishing te page.

Wish: http://prntscr.com/ee2o2l (of course, this isn’t X theme, but something like this).

How could i do this?

Thanks a lot!

[Jeroen]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! That’s not usually possible but could be possible with some custom CSS like this :

.x-nav .x-nav-tabs-item:nth-child(1) a::before {
	content: "\f086";
	font-family: FontAwesome;
	margin-right: 10px;
}
.x-nav .x-nav-tabs-item:nth-child(2) a::before {
	content: "\f0e0";
	font-family: FontAwesome;
	margin-right: 10px;
}

Result would be like this – http://prntscr.com/eeain8

You can grab the icon’s UNICODE from here – http://fontawesome.io/icons/

Note that you might need to place the CSS within Child Theme’s style.css since it might not work within Custom CSS.

Cheers!

[Jeroen]

Hi Rupok,

Great, thanks!

Do you have tips to change the color and size of the icon?

Thanks a lot!

[Lely]

Hi Jeroen,

Please use this custom CSS:

.x-nav-tabs>li>a {
    font-size: 20px;
    color: red; /*Update to your preferred color*/
}
.x-nav-tabs>.active>a, .x-nav-tabs>.active>a:hover {
    color: green; /*Update to your preferred hover and active color*/
 }

Hope this helps.

[Christopher]

Hi there,

Please update previous code to :

.x-nav .x-nav-tabs-item:nth-child(1) a::before {
    content: "\f086";
    font-family: FontAwesome;
    margin-right: 10px;
    color: red;
    font-size: 21px;
}

Hope it helps.

[Jeroen]

Hi There,

Thanks a lot! You’re great 🙂

Last question (i hope).

Is there a possibility to make some space between the tabs and content?
Example: http://prntscr.com/eek2vm

[Lely]

Hi Jeroen,

Please use this on Cornerstone > Settings Tab > Custom CSS:

ul.x-nav.x-nav-tabs.four-up.left {
    margin-right: 20px;
}
.x-nav-tabs.left {
    border-right: 1px solid rgba(0,0,0,0.1);
}

Hope this helps.

[Jeroen]

Thanks, you’re great!

[Rue Nel]

You’re welcome!
Thanks for letting us know that it has worked for you.

[Author]

Posts