[RupokMember]

Hi there,

Thanks for updating. You said it’s an icon list that makes the confusion. However if you are using Icon Element then you can easily add the font-size to the Style Field – http://prntscr.com/8qqev1
(Make sure to enable Advance Control to see this option – http://prntscr.com/8qqfbd)

If you want to add it once for all icon for this page, then add it to the Custom CSS –

[data-x-icon]::before, [class*="x-icon-"]::before {
  content: attr(data-x-icon);
  font-size: 30px;
}

Hope this helps.

Cheers!

[Susan MParticipant]

Howdy!

How can I control the icon size in this:

<p class=”man”> [x_icon type=”cc-visa” style=”opacity: 0.6;”] [x_icon type=”cc-mastercard” style=”opacity: 0.6;”] [x_icon type=”cc-discover” style=”opacity: 0.6;”] [x_icon type=”cc-paypal” style=”opacity: 0.6;”]</p>

I have this code in a text box to copy-paste into a text widget (to show in the footer).

Thanks a bunch!

[RadModerator]

Hi Susan,

You can directly apply font-size at style attribute.

Like this,

[x_icon type="cc-visa" style=”opacity: 0.6; font-size: 10px;"]

You have to repeat it for every icon shortcode, you can also try using class base css. All you have to do is wrap your content with unique class name.

<p class="man icon_custom_size"> [x_icon type="cc-visa" style="opacity: 0.6;"] [x_icon type="cc-mastercard" style="opacity: 0.6;"] [x_icon type="cc-discover" style="opacity: 0.6;"] [x_icon type="cc-paypal" style="opacity: 0.6;"]</p>

Then css should be :

.icon_custom_size [data-x-icon]::before, .icon_custom_size [class*="x-icon-"]::before {
  font-size: 10px;
}

Hope this helps.

[Susan MParticipant]

Yay! I kept trying different variations of this before, but every character counts!

Success:

<p class=”man icon_custom_size”> [x_icon type=”cc-visa” style=”opacity: 0.6; font-size: 30px;”] [x_icon type=”cc-mastercard” style=”opacity: 0.6; font-size: 30px;”] [x_icon type=”cc-discover” style=”opacity: 0.6; font-size: 30px;”] [x_icon type=”cc-paypal” style=”opacity: 0.6; font-size: 30px;”]</p>

Thanks again… you guys are the BEST.

[ThaiModerator]

Glad it worked, Susan 🙂

If you need anything else, please let us know.

[LeannaParticipant]

Why does the icon have such a wide border around it when sized up? I removed all margins/padding around everything but still the icon has a very wide space around it and won’t allow my heading below it to close the gap. to see what I mean scroll almost to the bottom of http://www.tellasia.org/newsite/wordpress/disciple/leadership-developmet/ under HERE’S WHAT YOU’LL GET WHEN YOU FULLY FUND A TRAINING PROGRAM
Thanks

[LeannaParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add mtn in headline’s class field.

Also add ptn in class field of section #6 if want to remove more space on top.

Hope it helps.

[LeannaParticipant]

that didn’t work. Specifically I want to remove the space between the image and the “custom headline” below it. See screenshot – blue arrow

[JadeModerator]

Hi Leanna,

You can add this under Custom > CSS in the Customizer.

.page-id-290 #x-section-6 [data-x-icon], 
.page-id-290 #x-section-6 [class*="x-icon-"] {
    max-height: 215px;
}

Hope this helps.

[StiftungWeltbevoelkerungParticipant]

Hey there, why not simply integrating that feature into the normal Cornerstone or theme. Would make things much easier… also for other things, like choosing the color of the Headline instead of adding to the style or custom css everytime.

[Paul RModerator]

Hi,

We certainly appreciate the feedback! This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive. Thanks!

[LeannaParticipant]

hey that worked great, THANK YOU!
can I make that into a class so I can easily add it to other pages?
OR is there a way to code this into the page itself rather than in customizer… just to keep general site-wide customizations in customizer and page-specific ones in the pages themselves?

[LelyModerator]

Hello Leanna,

To move the code on to the page itself, move it in Cornerstone > Settings Tab > Custom CSS.
To use class add custom-icon on icon class field, then define in like this:

.custom-icon{
max-height: 215px;
}

Hope this helps.

[LeannaParticipant]

thanks!

[Author]

Posts