Changing social media icons

[MarkPacumio]

Hi!

I am in the process of creating a new website for my company. So instead of updating the published site, I decided to just create one from scratch. I wanted to add social media icons and change the way they look from the default design that comes with the builder. I managed to get it done and have it set according to how I want it to look on the home page (white outlines/icons instead of black). I thought of adding the same links in the Contact Us page but wanted them to look different (black outline/icons instead of white) but everytime I add them on the page, they come out the same as the ones in the home page. I tried changing the css code but doing so will also change the way the icons look in the home page. Is there any way to get them set differently?

[Bernadette3]

Hi @MarkPacumio

I'm not able to assist with custom code, but how are you adding the customizations? Are you editing through the css/html section, or are you adding a code snippet under Settings > SEO > Header? 

Also, it may help to post a direct link to the page you are trying to edit. There are users on here that are able to help with code, and it helps them to be able to see the live site. 

[MarkPacumio]

Hi Bernadette,

Thanks for responding.

This is what I did:

1. Added Social Icons from the build tab to the home page.

2. Edited the css code based on a tutorial I found in the community to suit the style I like using this code

/* Social */
.wsite-social-item {
font-size: 2.5em; /* Changes the social media icons' size */
color:#ffffff; /* Changes the social media icons' color */
padding:.2em; /* Changes the padding between the icons and the edge of their background color */
box-sizing:border-box;
margin: 5px;
.transition(all 300ms ease);

&:first-child {
margin-left: 0;
}

&:last-child {
margin-right: 0;
}

&:hover {
color: fade(#A5F623, 60%) /* Changes the social media icons' hover color */
}
}

.wsite-social-facebook { color: #ffffff; }
.wsite-social-facebook:hover { color: #fff; background: #3b5998; }

.wsite-social-twitter { color: #ffffff; }
.wsite-social-twitter:hover { color: #fff; background: #00aced; }

.wsite-social-instagram { color: #ffffff; }
.wsite-social-instagram:hover { color: #fff; background: #f09433; background: -moz-linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); background: -webkit-linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); background: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); filter: progidXImageTransform.Microsoft.gradient(startColorstr='#f09433',endColorstr='#bc1888',GradientType=1); }

.wsite-social-linkedin { color: #ffffff; }
.wsite-social-linkedin:hover { color: #fff; background: #0077B5; }

.wsite-social-mail { color: #ffffff; }
.wsite-social-mail:hover { color: #fff; background: #ffa31a; }

.wsite-social-flickr { color: #ffffff; }
.wsite-social-flickr:hover { color: #FF0084; background: #0063DC; }

.wsite-social-pinterest { color: #ffffff; }
.wsite-social-pinterest:hover { color: #fff; background: #C92228; }

.wsite-social-plus { color: #ffffff; }
.wsite-social-plus:hover { color: #fff; background: #d34836; }

.wsite-social-rss { color: #ffffff; }
.wsite-social-rss:hover { color: #fff; background: #f26522; }

.wsite-social-vimeo { color: #ffffff; }
.wsite-social-vimeo:hover { color: #fff; background: #1ab7ea; }

.wsite-social-yahoo { color: #ffffff; }
.wsite-social-yahoo:hover { color: #fff; background: #410093; }

.wsite-social-youtube { color: #ffffff; }
.wsite-social-youtube:hover { color: #fff; background: #cd201f; }

.wsite-social-dribbble { color: #ffffff; }
.wsite-social-dribbble:hover { color: #c32361; background: #ea4c89; }

The result of the code above is below

Now, I am hoping to add social icons in the Contact Us page to look like below and I tried editing the css code. However, doing so also changes the one in the home page. I want the style of the icons in each page to be different. I hope somebody would be able to help.

[Bernadette3]

Gotcha. Again, I'm definitely not a code export, but I believe you can add a code snippet on an individual page so that the override is only affecting the particular page. 

Click on Pages at the top of the editor, then click on the page name on the left side of the screen. Next, click SEO Settings, then add your code to the header or footer area. 

Note: the code snippet needs to have some kind of open and close tag at the beginning and end of the code. ex: <style> (open) </style> (close)

I just don't know what the exact open/close tag should be. Hopefully one of our community code experts will be able to give you some better clarification on this. 🤞