Activello Social Icons

Hello,

I am using the Activello theme. I was wondering if there is a way to make the social media icons show different colors other than the default. Like #3b5998 code for Facebook, #55acee for Twitter etc.

I know this is possible with the Sparkling theme by adding some codes in the custom css, but I don’t know how to do this with the Activello theme and I don’t really have coding skills :frowning:

Thank you in advance for your help,
Cristina

Hi @Cristina,

I hope you are well today and thank you for your question.

Yes it’s also possible to achieve this with Activello theme by using custom CSS code.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS

#social li a[href*="twitter.com"] .fa:before,
        .fa-twitter:before {
            color : #55acee;
        }
        #social li a[href*="facebook.com"] .fa:before,
        .fa-facebook-f:before,
        .fa-facebook:before {
            color : #3b5998;
        }
        #social li a[href*="github.com"] .fa:before,
        .fa-github:before {
            color : #696969;
        }
        #social li a[href*="/feed"] .fa:before,
        .fa-rss:before {
            content: "\f09e"
        }
        #social li a[href*="pinterest.com"] .fa:before,
        .fa-pinterest:before {
            color : #696969;
        }
        #social li a[href*="plus.google.com"] .fa:before,
        .fa-google-plus:before {
            content: "\f0d5"
        }
        #social li a[href*="linkedin.com"] .fa:before,
        .fa-linkedin:before {
            color : #696969;
        }
        #social li a[href*="youtube.com"] .fa:before,
        .fa-youtube:before {
            color : #696969;
        }
        #social li a[href*="instagram.com"] .fa:before,
        .fa-instagram:before {
            color : #696969;
        }
        #social li a[href*="flickr.com"] .fa:before,
        .fa-flickr:before {
            color : #696969;
        }
        #social li a[href*="tumblr.com"] .fa:before,
        .fa-tumblr:before {
            color : #696969;
        }
        #social li a[href*="dribbble.com"] .fa:before,
        .fa-dribbble:before {
            color : #696969;
        }
        #social li a[href*="skype.com"] .fa:before,
        .fa-skype:before {
            color : #696969;
        }
        #social li a[href*="foursquare.com"] .fa:before,
        .fa-foursquare:before {
            color : #696969;
        }
        #social li a[href*="vimeo.com"] .fa:before,
        .fa-vimeo-square:before {
            color : #696969;
        }
        #social li a[href*="weheartit.com"] .fa:before,
        .fa-heart:before {
            color : #696969;
        }
        #social li a[href*="spotify.com"] .fa:before,
        .fa-spotify:before {
            color : #696969;
        }
        #social li a[href*="soundcloud.com"] .fa:before,
        .fa-soundcloud:before {
            color : #696969;
        }

Please change the color value in the above code to whatever you want to use by referring the following pages.

http://www.w3schools.com/html/html_colors.asp
http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.asp

Best Regards,
Movin

Hello Movin,

Thank you so much for your help. Its working perfectly :slight_smile:

Have an awesome week,
Cristina

You are most welcome here :slight_smile: