Change color & size of sidebar social icons

Okay, so I figured out how to increase the size of the icons. But I still don’t know how to do the rest of the things:

Change color of the icons.
Add a mail icon, if possible.
Centre align the icons (they are always left aligned it seems)

utterlycynthia.com/blog

Any help will be appreciated.

~Cynthia

Hi Cynthia,

Is there an easy way to change the color and increase their size?

You can change the colour and size of the icons with some custom CSS.

In case you’re not aware: Please do not edit your theme’s files directly. Any changes you make there will be lost when it comes time to update.

Instead, to add custom CSS: Frstly set up a child theme or activate a standalone CSS plugin. (As you already have Jetpack installed then you can activate its custom CSS module.)

Enter the following snippet in either the editor for your CSS plugin or the style.css file of your child theme:

.widget_wpcom_social_media_icons_widget .genericon {
    font-size: 20px;
    color: #663399;
}

You can change the value of #663399 to any HEX code of your choice. If you’d like to experiment with different colours, try a few Google searches to get a list of HEX codes and their corresponding values. Here’s an example of a site that I’ve used before:

https://www.color-hex.com/

Similarly, increase/decrease the value of 20px to your liking.

Also, I would like to add the mail icon which isn’t present by default in the Jetpack widget. I know it’s done with Genericons, but I don’t know how.

You could add the following HTML to a Text widget in order to create a link to a mail icon:

<li>
	<a title="Email" href="mailto:[email protected]" class="genericon genericon-mail" target="_blank">
		<span class="screen-reader-text">Email</span>
	</a>
</li>

In the above HTML, replace [email protected] with your email address.

To most straightforward get all of your other social icons to display alongside the mail icon is to copy/paste the HTML for them to your Text widget:

<ul>
	<li>
		<a title="View @utterlycynthia’s profile on Twitter" href="https://twitter.com/@utterlycynthia/" class="genericon genericon-twitter" target="_blank">
			<span class="screen-reader-text">View @utterlycynthia’s profile on Twitter</span>
		</a>
	</li>
	<li>
		<a title="View Cynthia Ranjeeta’s profile on LinkedIn" href="https://www.linkedin.com/in/Cynthia%20Ranjeeta/" class="genericon genericon-linkedin" target="_blank">
			<span class="screen-reader-text">View Cynthia Ranjeeta’s profile on LinkedIn</span></a>
	</li>
	<li>
		<a title="View +CynthiaRanjeeta’s profile on Google+" href="https://plus.google.com/u/0/+CynthiaRanjeeta/" class="genericon genericon-googleplus" target="_blank">
			<span class="screen-reader-text">View +CynthiaRanjeeta’s profile on Google+</span>
		</a>
	</li>
	<li>
		<a title="Email" href="" class="genericon genericon-mail" target="_blank">
			<span class="screen-reader-text">Email</span>
		</a>
	</li>
</ul>

Centre align the icons (they are always left aligned it seems)

You can centre align the icons by targeting the widget they’re in via CSS and then using text-align: center;.

Let me know if you decide to move your icons to a Text widget (following on from my above guidance) and I can then help with the specific CSS you need.

Thanks!

Hi Siobhan,

I put the icons in a text widget, but the CSS you provided didn’t change either the color or the size. And the icons are one below the other, instead of being side by side. Did I do something wrong?

https://utterlycynthia.com/blog

Thanks for the help ??

Okay, I managed to change the color with the following code:

.genericon {
        color: #fa8072;
}

But I still don’t know how to bring them side by side, or increase the size.

Thanks for the help ??

I managed to solve my issues by myself.

I removed the spaces in the code to place the icons side by side.

I changed the size with this:

.genericon {
	font-size: 30px;
}

I adjusted the spacing with this:

.genericon {
	margin: 15px;
}

I don’t know if I was supposed to use some other CSS but these worked fine.

All’s good now ??

Thanks so much!

~Cynthia

Hi Cynthia,

The CSS you added looks good and I’m glad you were able to resolve this. ?? If extra questions come up then please feel free to start another thread.