How to change the color of social media icons in the footer

[PedroPrado]

I want to change the color of the social media icons on my footer in general. What should I do to achieve this?
my store link: https://xqtymudi20rxhvpp-78296449301.shopifypreview.com

[BSSCommerce-B2B]

Hi @PedroPrado , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file base.css or section-footer.css. And add this code snippet to the end of the file.

.icon.icon--full-color path {
    fill: currentColor;
}

In this step, you can change the color of attribute "fill" to change the color of social media icons. 

But, I think color of social media icon is white as old version looks the best so should don't change .

Step 3: Save your code and reload this page.

=>> The result: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[PedroPrado]

Hi, It's don't work. 

The icons are black.
Don't you have another better way to help me?

[BSSCommerce-B2B]

Hi @PedroPrado , 

Sr about misunderstanding your requirement,

Thank you for reply and describe exactly issue like your image below. You want to change the color of the social item ( icon instagram, tiktok) right? 

So, In Step 2: Search for the file base.css or section-footer.css. And add this code snippet to the end of the file.

li.list-social__item svg path {
    fill: red;
}

You can change the color as you want. In my example, I choose red.

And the result will be: 

We hope my suggestions will fully meet your requirements this time.

If it is helpful, can you kindly give us many likes and mark the solution for us? 

This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community. Thanks in advance.

[PageFly-Richard]

Hi @PedroPrado 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> 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 </head>

<style>
li.list-social__item svg path {
    fill: red;
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly