How can I align icons with text in the Shella theme?

Shopify Discussion

Topic summary

Main issue: On the live storefront, social/contact icons appear higher than the accompanying text; in the editor they align correctly. The user wants the icon centers vertically aligned with the text lines in a Shella (Shopify) theme footer.

Context and evidence:

  • Screenshot provided (image is central to understanding the misalignment).
  • HTML snippet shared showing icons (e.g., [icon:theme-210/329/159]) with links for Instagram, WhatsApp, and email.
  • One line uses a flex container (d-flex align-items-center), while subsequent lines are individual and elements separated by
    .

Requests and updates:

  • A helper asked for the store URL and password if enabled.
  • The store URL was provided: https://www.ohwantedstudio.com/ (issue located in the footer). No password was shared.

Status:

  • No fix or code solution posted yet. The discussion remains open.
  • Key unanswered point: specific CSS/HTML adjustments needed to vertically center icons with text on the live site.
Summarized with AI on January 9. AI used: gpt-5.
1

Hey!

I’ve been looking for a fix for this problem for a while now. As you can see in the picture down below, my icons are positioned higher then the text, even though when I’m editing the page the icons are positioned properly. Do you guys know how to fix this and make the center of the icons align with the center of the sentences? (I’m using the Shella theme)

Screenshot 2024-01-05 at 1.28.43 PM.png
Screenshot 2024-01-05 at 1.28.43 PM.png650×440 32.1 KB

code:

Have a question? You may find an answer in our FAQs. Have more questions? We're here to help.


[icon:theme-210] ohWantedStudio
[icon:theme-329]  WhatsApp
[icon:theme-159]Send us an email
2

Hey @amazezones

Could you share your store URL and Password if enabled?

3

https://www.ohwantedstudio.com/

its in the footer