To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

Narrative theme - Footer and header - Social Media Icon

Solved
PepeijnGiezen
New Member
1 0 0

Hi guys, I am currently setting up my website and need some help... I did my research but I could find nothing.

Here's what I am trying to achieve: I have different social media icons, Pinterest, Facebook, Twitter and Instagram however the icons are the same color as the rest of the text but I need each icon to display its original app color  ex. twitter light blue, Pinterest red, etc.

 

In the picture you may not see the icons in the header due to the white icon color on white background due to footer. In the footer you can see the white social icons. The icons in the header and footer need to be changed to each social icons original color. Thanks!

@KetanKumar 

Just incase, 

Website: vonmuller.co

Password: hyped4youCapture999.PNG

 

footer.PNG

Accepted Solution (1)

Accepted Solutions
Savior
Shopify Partner
537 108 153

This is an accepted solution.

@PepeijnGiezen 

 

Hello 

1. Go to your store. Themes > Edit Code

2. Go to Assets > theme.scss.css and paste these lines at the bottom of the file.

 

svg.icon.icon-facebook {
    fill: #3b5998 !important;
}
svg.icon.icon-twitter {
    fill: #00acee !important;
}
svg.icon.icon-pinterest {
    fill: #E60023;
}
svg.icon.icon-instagram {
    fill: #C13584;
}

 

Savior_0-1638110666511.png

 

as Instagram contains a combination of different colors so you can change the SVG of Instagram icon with gradient color SVG.


If this helps you please like and accept as a solution to help other people. Hire me or mail me for any queries. 

If helpful, please Like and Accept Solution.


Hire me or mail me  | Shopify Design Changes | Custom Modifications In to Shopify Theme | Site Speed Optimization
Use GemPages Page Builder to build, design, and optimize your store. View app

View solution in original post

Reply 1 (1)
Savior
Shopify Partner
537 108 153

This is an accepted solution.

@PepeijnGiezen 

 

Hello 

1. Go to your store. Themes > Edit Code

2. Go to Assets > theme.scss.css and paste these lines at the bottom of the file.

 

svg.icon.icon-facebook {
    fill: #3b5998 !important;
}
svg.icon.icon-twitter {
    fill: #00acee !important;
}
svg.icon.icon-pinterest {
    fill: #E60023;
}
svg.icon.icon-instagram {
    fill: #C13584;
}

 

Savior_0-1638110666511.png

 

as Instagram contains a combination of different colors so you can change the SVG of Instagram icon with gradient color SVG.


If this helps you please like and accept as a solution to help other people. Hire me or mail me for any queries. 

If helpful, please Like and Accept Solution.


Hire me or mail me  | Shopify Design Changes | Custom Modifications In to Shopify Theme | Site Speed Optimization
Use GemPages Page Builder to build, design, and optimize your store. View app