Docs

[sallyshuey]

Hi! When I use the icon short code, the icon has a wide pad around it. How can I decrease the size of this padding, or eliminate it altogether? It’s preventing my icons from aligning to the top of other objects in adjacent columns. There’s an example on my dev site. I’ll send access info in a following private post. Thanks.

[sallyshuey]

This reply has been marked as private.

[Prasant Rai]

Hello There,

Thanks for writing in!

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

[data-x-icon], [class*="x-icon-"] {
    font-size: 350% !important
}

Let us know how it goes.

Thanks.

[sallyshuey]

Sadly, not well. Looks like the code overrode the icon size set in class — or icon feature list short code — in which odd things happened.

[sallyshuey]

Sorry! Hit submit too soon. 🙂 These screenshot files are named per what happened when I added your short code to the customizer. My goal, to be able to control the size of the icon and adjust the padding that seems baked into the icon short code. Ideas??

[sallyshuey]

Perhaps I added it wrong? I went into customizer/custom/edit global css … pasted the code at the botton and backed out to click “save and publish”. That right or?? Thx! S.

[Joao]

Hi There,

If your goal is to remove the space above and below the Icon you can change the code provided for this:

[data-x-icon], [class*="x-icon-"] {
    font-size: 350% !important;
    line-height: 0 !important;
}

You can control the size of the icons if you dont want them so big by decreasing the 350% value.

I Hope I have answered your question.

If you need further help, let us know.

Joao

[sallyshuey]

That is my goal, and good to know about how to control the icon sizing. However, I added the code to Customizer/Custom/Edit Global CSS then saved, refreshed the page and no change. Am I adding it correctly? How to make it work? Thanks for the hand holding!

[Jade]

Hi Sally,

I tried to check your site why the code is not working but the logins you have provided are not working anymore. Would you mind checking it so that we could check this further? Thank you.

[sallyshuey]

This reply has been marked as private.

[Rue Nel]

Hello Sally,

Thanks for providing the login credentials! I went ahead and edited the page to save your from trouble. By default, when you change the font size of the icon, it has a default line-height of approx. 1.7 and that will place the icon at the middle center which may create space around the icon. To be able to remove that, when adding an inline css font-size: 100px; as an example, you also need to have a line-height: 100px;.

Hope this helps.

[sallyshuey]

Thanks for that! It’s great to know how to edit the padding. They look super in desktop and laptop, but in mobile the icons get very tiny, though the size is still 100 or 200 px. Look at the section above in mobile view — the one that you redid — as an example, and this also affects every section with icons, mobilve view only. How to fix? Thx! S.

[sallyshuey]

Oh, and the icons are blown out again in mobile view of icon features list, though they look fine in desktop. View this section in mobile for an example: http://openadopt.doreydevelopment.com/become-an-adoptive-parent/#section-15-reasons-to-choose-oafs/ How to make it right? Thx! S.

[Paul R]

Hi,

To fix it, you can add this under Custom > CSS in the Customizer.

@media (max-width: 767px) {
.home #section-15-reasons .x-feature-box-graphic i {
    font-size: 60px !important;
}

.page-id-89 #section-connect-with-us .x-icon {
    font-size: 80px !important;
}
}

Hope that helps.

[sallyshuey]

Sweet! We’re almost there. The icon features lists now look great. However, stand alone icons in mobile view are still down sizing. For example, in these screenshots the icon font size is 200px and views fine in desktop but not so much in mobile — it’s too teeny and doesn’t have the appropriate padding. You have a fix for that? Thanks!

[Author]

Posts