Help with adding margin after icon in icon list please!

[core365]

Hi, I hope you can help me out with something please! I’m working on a website and I’m using the Classic Icon List but I can’t figure out how to add extra space after the icon, as at the minute it’s too close to the text that’s to the right of it. I’ve tried so many variations of CSS and nothing works - some of the text goes over onto 2 lines, so the space added needs to indent both lines of text and not just the first line.

I’ll put the URL in a secure note as I’ve got a construction page up at the mo. Here’s a screen grab of the icon list I’m referring to:

Thanks!

[prakash_s]

Hello @core365,

Thanks for writing to us.

To add an extra space between the list-icon and content you need to add this custom CSS code under X/Pro—>Theme Option —>CSS.

ul.x-ul-icons li.x-li-icon i.x-icon-check {
padding: 5px 15px 5px 0px !important;
}

Please feel free to change the value of padding as per your design.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[core365]

Hi @prakash_s,

Thanks for the CSS, I’ve added it in, but it was getting similar results that I was - when the content splits onto 2 lines, the text on the second line doesn’t line up correctly with the text above it. I’ve tried to alter the padding to try to fix this, but it doesn’t work. For some reason the second line doesn’t indent the same as the first. Please see screen grab:

I’d appreciate any help with this!

Thanks

[tristup]

Hi @core365,

You may need to adjust the text-indent of the list by adding the following custom CSS code into Theme Options > CSS.

ul.x-ul-icons
{
    text-indent: -12px !important;
    margin-left: 25px !important;
}

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something in your site nor will we enhance it.

Thanks

[core365]

Hi @tristup,

That’s spot on, thanks!

I appreciate your time and help with this, thank you!

[marc_a]

Hi @core365,

You’re welcome and it’s our pleasure to help you. If you have any other concerns regarding our theme features, feel free to reach us.

Thank you.