These examples are placed on a blue background box to stand out, this is not part of the code. If you are placing these icons on a white background you can change the first rule in the CSS from white, to whatever color you want your icons. You can generate this code automatically, and visually play around with the style on our social media icon style generator page

Social Icon Square Style

HTML Code

<div class="wrapper">
<i class="fab fa-facebook-square fa-3x social"></i>
<i class="fab fa-twitter-square fa-3x social"></i>
<i class="fab fa-pinterest-square fa-3x social"></i>
<i class="fab fa-youtube-square fa-3x social"></i>
</div>

CSS Code

.fab {
	color: white;
}
.social:hover {
	margin-top: -10px;
	text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);
	transform: translateY(-2px);
}

Add Official Social Network Color on Mouseover

HTML Code

<div class="wrapper">
<i class="fab fa-facebook-square fa-3x"></i>
<i class="fab fa-twitter-square fa-3x"></i>
<i class="fab fa-pinterest-square fa-3x"></i>
<i class="fab fa-youtube-square fa-3x"></i>
</div>

CSS Code

.fab {
	color: white;
}
.fa-facebook-square:hover {
	margin-top: -10px;
	text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);
	transform: translateY(-2px);
        color:#4267B2;
}
.fa-twitter-square:hover {
	margin-top: -10px;
	text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);
	transform: translateY(-2px);
        color:#1DA1F2;
}
.fa-youtube-square:hover {
	margin-top: -10px;
	text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);
        transform: translateY(-2px);
        color:#c4302b;
}
.fa-pinterest-square:hover {
	margin-top: -10px;
	text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);
        transform: translateY(-2px);
        color:#c8232c;
}