How can I move an icon to the left of my text

[RobMoore007]

Im using text columns with icons section on my home page.

By default, the icon is above the text.

I want the icon to appear to the left of the text. How can I achieve this ??

https://t4s7qjfrlmz3wxpe-62159716511.shopifypreview.com

passsword: ohtrow

[juansmartdev]

Hi, @RobMoore007

Here is the code.

1. Go to Online Store → Theme → Edit code
2. Asset → /style.css → paste below code at the bottom of the file.

.index .icon-with-text-column__column {
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;
}

Note: this would only take effect on home page, if you want those sections to be affected globally remove “.index” in the css code.

If you find these useful please buying me a coffee to keep runnings things smoothly
https://www.buymeacoffee.com/juandev

[RobMoore007]

Thanks for your help!

Sadly the icons are not inline ? How can I ensure they are inline

[gr_trading]

it’s becoz your icons have margin-bottom: 20px in css. Please update CSS with

#shopify-section-template--15890887180447__1664016205bc693d69 .icon.is-small {
    height: 1.8rem;
    width: 1.8rem;
    margin-right: 10px;
    margin-bottom: 0;
}

[RobMoore007]

Thanks very much