Align centre text within an icon field

[Shane_h]

Hi i wonder if anyone has a solution for this please

we have an icons bar at the bottom of here https://dtf2u.co.uk/ and in the image below and using 3 icons however we want to align centre the text we are using within the icon field just for this one and not other icons being used within the store - thankyou

[CafeDelMar]

Hello @Shane_h .

Do you want to stack the text vertically? Like

---

Text block
Icon
Text block

---

Or can you maybe show this with arrows what goes where?

[Shane_h]

Like this

[Moeed]

Hey @Shane_h

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[CafeDelMar]

@Shane_h , here’s how to achieve that:

1. Go to “Online Store”

2. Three dots → Edit Code

3. Find the styles.css file

4. Add the following code at the bottom of the file

5. Save and refresh the target store page

ul.icons-bar-inner li {
    text-align: center !important;
}

If done correctly, the result should be like this:

I hope this helps!

If you don’t want to edit the theme code directly, you can use a code injection app like the one in my signature.

p.s. Your website is currently rendering some code at the bottom

[Shane_h]

Thanks i will take a look at the soiftware in your signature , is it possibole to reduce the spacing top and bottom in the icons bar ? and how

[CafeDelMar]

It is possible for sure, just tell me what spacing exactly you want to reduce and by how much

[Shane_h]

5 px top and 5 px bottom we can always adjust from there

[CafeDelMar]

Sorry, what icons exactly? Do you mean this space?

[Shane_h]

apologies the spacing on these icon bars marked in arrows

[CafeDelMar]

You can add this to the bottom of styles.css

.icons-bar h1 {
	margin-top: 0.5rem !important;
	margin-bottom: 0.5rem !important;
}

.icons-bar ul li {
	margin-top: 1rem !important;
	margin-bottom: 1rem !important;
}

Here’s the result. Feel free to readjust the values.

[Shane_h]

PERFECT !