Tab Icon Font Size

This topic has 7 replies, 2 voices, and was last updated 6 years by psmorrow.

Author
December 28, 2017 at 17:26 #184100

psmorrow
Participant

Hi there,

I’m using a “Tab” page element, and I would like to increase font size of the tab icons. Can you help me with the css snytax?
December 28, 2017 at 17:28 #184101

psmorrow
Participant
here is the css that I wrote that does not work:
COPY CODE
```
.wpb-js-composer .vc_tta.vc_general {
    font-size: 8em;
    line-height: 1;
    display: inline;
}
```
December 28, 2017 at 18:39 #184110

Kieran_SQ
Moderator

Hi,

If the WP Bakery (formerly Visual Composer) element you’re using is ‘Tabs’ and not ‘Kleo Tabs’ then you can use the below CSS to increase the size of the icon in the tab.

.wpb-js-composer .vc_tta.vc_general .vc_tta-icon {font-size: 1.5em;}

Note the size is expressed in em and not px, the default value for the tab icon is 1.15, I have increased this in the example above to 1.5

Thanks,

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

December 28, 2017 at 18:57 #184115

psmorrow
Participant

SOrry to say it doesn’t seem to be working. Is there a setting that disables custom css somewhere that might be preventing css edits?

December 28, 2017 at 19:00 #184116

Kieran_SQ
Moderator

Hi,

There is no setting in KLEO that would disable CSS edits, nor any in WordPress by default that I know of. Please make sure you clear your website cache, any CDN and local cache (Ctrl+F5) to see any changes.

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

December 29, 2017 at 02:36 #184151

psmorrow
Participant

I’ve cleared local cache and sorry to say the css still does not change the font size of the icon. As shown in attached screenshots.

I am able to edit other page elements with css. Wondering if its a syntax issue?

Any other suggestions?

Attachments:
You must be logged in to view attached files.

December 29, 2017 at 03:08 #184155

Kieran_SQ
Moderator

Hi,

Please try this with an important statement

.wpb-js-composer .vc_tta.vc_general .vc_tta-icon {font-size: 1.5em !important;}

Also please try adding to the style.css in the child theme or in theme options instead of via the customizer.

If neither of the above steps work please copy all of the shortcode contents and share here using the code tags so I can see exactly how your page is setup.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.
January 3, 2018 at 14:07 #184596

psmorrow
Participant
This seems to work, thanks!
COPY CODE
```
.wpb-js-composer .vc_tta.vc_general .vc_tta-tab {
	line-height:1.5;
	font-size: 2em;
	}
```
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The forum ‘General questions’ is closed to new topics and replies.

Attachments:

Search KB

Log in with your credentials

Forgot your details?