Social icons bigger and different colors

Activello
1

Hey there,

I haven’t found the issue here yet but I’m sure you can help me quickly.

I have placed the social icons via the activello social widget in my right sidebar. I would like to make the icons a bit bigger and give them different colors (the current is black for all). Same in the footer.

Is there a custom CSS code you can offer me?

Thanks in advance!
GibsonLG

2

Hi GibsonLG,

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

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 -> Additional CSS

#secondary .widget .social-icons a {
    font-size: 22px;
    color: #d23333;
}

Best Regards,
Movin

3

Hey Movin,

many thanks for that, I will give it a try. There’s no option to add different colors to a single certain icon (like blue to Facebook or red to Youtube)?

4

Hi,

You can target the icons directly with these, if you want to target facebook Icon color, then use this CSS in Appearance -> Customize -> Additional CSS,


		#social li a[href*="facebook.com"] .fa:before,
		.fa-facebook-f:before,
		.fa-facebook:before {
			color: "#ff0000";
		}

Change #ff0000 according to your needs, Open this file /wp-content/themes/activello/inc/socialnav.php from line #56 to #125 you will get the CSS selector for different icons in the Social Menu. :slight_smile:

Let us know,

Thanks,
laranz.