How can I change the color of my Facebook icon on Craft theme?

Store Design

Topic summary

Goal: change the Facebook icon styling in the Craft theme—remove it from the header and make it blue in the footer (currently white in header, black in footer).

Access: a helper requested the store URL and password; the merchant provided them.

Proposed solutions:

  • Insert custom code in theme.liquid before . A screenshot was shared to show placement, but the actual code snippet wasn’t included in the post text (image is central for guidance).
  • Add CSS at the bottom of base.css: svg.icon.icon-facebook { color: #000 !important; } to force a specific color.
  • Alternative CSS with steps: edit the theme’s CSS (base.css/style.css/theme.css) and add a.link.list-social__link { color: blue; } to color social links.

Outcome: the merchant confirmed the issue is solved but did not specify which method worked. No explicit instruction in the thread addressed removing the header icon, and no final solution was marked. Status appears resolved by the requester, with implementation details unspecified.

Summarized with AI on January 21. AI used: gpt-5.
1

Hi

Can anyone help me to change the colour of my Facebook icon on Craft theme. It’s currently white in the header and black in the footer. I would like it blue in the footer only and deleted in the header.

Kind regards

Molly

1 Like
2

Hi @Molly8

Can I take a look? Would you mind to share your Store URL website? with password if its protected. Thanks!

3

mollycoddlemeg.co.uk

password - preepi

4

Hi @Molly8

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyNoah_0-1692235474656.png
PageFlyNoah_0-1692235474656.png390×844 25.2 KB

Hope this can help you solve the issue

Best regards,

Noah | PageFly

5

Hi @Molly8

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:
svg.icon.icon-facebook {color: #000 !important;}

Regards,

San

6

Hi

Thanks, ive had a solution now for this problem.

Kind regards

Molly

1 Like
7

Is this solve?

You can try this one if you still like to change it to color.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
a.link.list-social__link {
    color: blue;
}
  • And Save.
  • I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!