How to Customize Simple Social Icons

The Simple Social Icons plugin is an easy to use, customizable way to display icons that link visitors to your various social media profiles. With a simple widget options interface, you can choose which profiles to show, customize the color and size of your icons, and specify the alignment of them.

The default output of the Simple Social Icons is one set of colors. However, it’s possible to use CSS for customizing the icons to match the color of their brand.

Customize the Social Icons

Below is the CSS that is required to customize each of the social media icons:

	/* Simple Social Icons
	--------------------------------------------- */
	.simple-social-icons li.social-dribbble a {
	border: 2px solid #ea4c89 !important;
	color: #ea4c89 !important;
	}
	.simple-social-icons li.social-dribbble a:hover {
	background-color: #ea4c89 !important;
	}
	.simple-social-icons li.social-email a {
	border: 2px solid #049fb3 !important;
	color: #049fb3 !important;
	}
	.simple-social-icons li.social-email a:hover {
	background-color: #049fb3 !important;
	}
	.simple-social-icons li.social-facebook a {
	border: 2px solid #3b5998 !important;
	color: #3b5998 !important;
	}
	.simple-social-icons li.social-facebook a:hover {
	background-color: #3b5998 !important;
	}
	.simple-social-icons li.social-flickr a {
	border: 2px solid #ff0084 !important;
	color: #ff0084 !important;
	}
	.simple-social-icons li.social-flickr a:hover {
	background-color: #ff0084 !important;
	}
	.simple-social-icons li.social-github a {
	border: 2px solid #000 !important;
	color: #000 !important;
	}
	.simple-social-icons li.social-github a:hover {
	background-color: #000 !important;
	}
	.simple-social-icons li.social-gplus a {
	border: 2px solid #dd4b39 !important;
	color: #dd4b39 !important;
	}
	.simple-social-icons li.social-gplus a:hover {
	background-color: #dd4b39 !important;
	}
	.simple-social-icons li.social-instagram a {
	border: 2px solid #517fa4 !important;
	color: #517fa4 !important;
	}
	.simple-social-icons li.social-instagram a:hover {
	background-color: #517fa4 !important;
	}
	.simple-social-icons li.social-linkedin a {
	border: 2px solid #007bb6 !important;
	color: #007bb6 !important;
	}
	.simple-social-icons li.social-linkedin a:hover {
	background-color: #007bb6 !important;
	}
	.simple-social-icons li.social-pinterest a {
	border: 2px solid #cb2027 !important;
	color: #cb2027 !important;
	}
	.simple-social-icons li.social-pinterest a:hover {
	background-color: #cb2027 !important;
	}
	.simple-social-icons li.social-rss a {
	border: 2px solid #ff6600 !important;
	color: #ff6600 !important;
	}
	.simple-social-icons li.social-rss a:hover {
	background-color: #ff6600 !important;
	}
	.simple-social-icons li.social-stumbleupon a {
	border: 2px solid #eb4823 !important;
	color: #eb4823 !important;
	}
	.simple-social-icons li.social-stumbleupon a:hover {
	background-color: #eb4823 !important;
	}
	.simple-social-icons li.social-tumblr a {
	border: 2px solid #32506d !important;
	color: #32506d !important;
	}
	.simple-social-icons li.social-tumblr a:hover {
	background-color: #32506d !important;
	}
	.simple-social-icons li.social-twitter a {
	border: 2px solid #00aced !important;
	color: #00aced !important;
	}
	.simple-social-icons li.social-twitter a:hover {
	background-color: #00aced !important;
	}
	.simple-social-icons li.social-vimeo a {
	border: 2px solid #aad450 !important;
	color: #aad450 !important;
	}
	.simple-social-icons li.social-vimeo a:hover {
	background-color: #aad450 !important;
	}
	.simple-social-icons li.social-youtube a {
	border: 2px solid #bb0000 !important;
	color: #bb0000 !important;
	}
	.simple-social-icons li.social-youtube a:hover {
	background-color: #bb0000 !important;
	}

view rawstyle.css hosted with ❤ by GitHub

While the use of !important isn’t ideal, it is a necessary part of the code. Be sure to set the Icon Font Hover Color to #fff and the Background Color to#fff in the widget options as this will universally apply white to all social media profiles.