utterlycynthia on "[Theme: Sela] Change color & size of sidebar social icons"

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:

http://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="[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>