[Oliver VParticipant]

Hello!

Everything updated.

I am trying to add icons before title in the Nav Tabs. I have found some information in the forum, but not related directly to Cornerstone. It seems I have to add code througt visual editor, but If I do so, there is a warning that changes will be overwritten in Cornerstone…

How to do it? If I add directly in the title, for example, [x_icon type=”refresh”], there is a text like: Make sure to insert title here”….

Thanks!!!

Oliver.

[RadModerator]

Hi there,

Thanks for posting in.

I’m not sure if I understand it correctly, you mean you wish to add icon into tab nav through cornerstone?

Yes, if you do changes on normal text editor and switch to cornerstone, it will reset all the content inside it. If you plan to permanently use cornerstone, then don’t do editing through text editor.

And html code is not allowed inside the tab title, and icon will not work. Though, it can be implemented in different way. For example, let say you wish to add icon the first tab nav.

Then add this css at your child theme’s style.css (let’s use my_class_name as our selector)

.my_class_name .x-nav-tabs-item:first-child a:before {
    content: "\f021";
    display: inline-block;
    font-family: "FontAwesome";
    margin-right: 8px;
}

Or second tab,

.my_class_name .x-nav-tabs-item:nth-child(2) a:before {
    content: "\f021";
    display: inline-block;
    font-family: "FontAwesome";
    margin-right: 8px;
}

f021 is icon code for refresh, and you can find them here http://fortawesome.github.io/Font-Awesome/cheatsheet/ (  )

Please note that this css will only work permanently if added on child theme’s style.css

Then, simply add my_class_name to your tab element’s class field input.

And, the easiest, you can add  as title content and it will be displayed as icon.

Hope this helps.

[LelyModerator]

Hello Oliver,

You can use the RAW CONTENT element and then insert the NAV TAB shortcode there. like below:
[tab_nav type="two-up" float="left"][tab_nav_item title="<i class='x-icon x-icon-refresh' data-x-icon=''></i> Click Me!" active="true"][tab_nav_item title="No, Click Me!" active=""][/tab_nav][tabs][tab active="true"] Your Content [/tab][tab] Your Content [/tab][/tabs]

You may also check this thread:https://community.theme.co/forums/topic/how-to-insert-an-icon-before-tab_nav_item-in-tabbed-content/#post-307836

Hope this helps.

[Oliver VParticipant]

Hello! Thanks! I have done it with Raw Content.

Great support!!!

Oliver.

[ChristopherModerator]

You’re welcome.

[Oliver VParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

Try adding following CSS under Appearance > Customize > Custom > CSS:

.x-ul-icons li {
margin-bottom: 10px;
}

Hope it helps.

[Oliver VParticipant]

Ok! Done. Thanks!

Oliver.

[ThaiModerator]

You’re most welcome 🙂

[Oliver VParticipant]

Hello again! Sorry….

I am now trying to reduce the space in the icons list JUST in one tab, not all from one page. Like here http://prntscr.com/8lh37q

I am trying to use this code, but not success:

.mas_info_2 .x-ul-icons li {
margin-bottom: 10px;
}

Any ideas?? Thanks!!!!

[RupokMember]

Hi there,

Thanks for updating! Would you please point us the exact url you have used it?

Cheers!

[Oliver VParticipant]

Yes!

http://www.staging4.ideasparatriunfar.com

[JadeModerator]

Hi Oliver,

Thanks for the link. Please use this CSS:

#mas_info_2 .x-ul-icons li {
    margin-bottom: 10px;
}

Hope this helps.

[Oliver VParticipant]

Great!

I was almost there!

Thanks!

Oliver.

[ZeshanMember]

You’re welcome!

[Author]

Posts