As a tiny module that follows WordPress very closely –it was included in the Twenty Fifteen Theme for example–, but not as a part of the official WP core, Genericons is an icon font very useful if you are thinking in creating a Social Menu. Well, this font includes a lot of good icons for other tasks but a third part of its icons are designed for giving support to social extensions.

Using Genericons, to create a social menu for example similar as the installed in this web site, it is so simple as enqueueing the Genericons Font, creating a new WP menu and deciding which social profiles you desire to include. You don’t need to add a special code, or modify substantially your themes because Genericons Font works in the same way that Dashicons so that let’s go straightly to the CSS code… Notwithstanding, if you have any problem with its installation or similars, you can always see this former article about how to use Dashicons font in your themes.

Just one additional thing, you don’t find Genericons Font in WordPress oficial website but in this address: Genericons Font.

Well, the code for styling genericons.

/**
 * Social Menú
 */
 
.social-navigation .screen-reader-text { display:none; }
.social-navigation ul { list-style: none; padding-left: 0px; position: relative; top: -2px; }

/* these next lines with a media query are an example of mixing genericons with Bootstrap 3.3.x */
@media screen and (max-width: 767px) {
.social-navigation ul { display: block; float: left; margin-bottom: 15px; }
}
.social-navigation ul { list-style: none; padding-left: 0px; position: relative; top: -2px; }
.social-navigation li { padding: 0px; margin: 0px; 	display: block; float:left; }
.social-navigation a  { color: #FFFFFF; position: relative; display:inline-block; }
.social-navigation a:hover, .social-navigation a:focus, .social-navigation a:active { color: #FFFFFF; }

.social-navigation a:before { 
	font-family: "Genericons";
	font-size: 22px; 
	padding: 9px;
	
	margin-right: 6px; 
	text-align: center;
	content: "\f415";
	transition: all ease-in-out 0.3s 0s;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	text-transform: none;
	line-height: 40px;
	position: relative;
	top: -3px;
}

.social-navigation a[href*="facebook.com"]:before { content: "\f204"; background-color: #4A66A0; }
.social-navigation a[href*="facebook.com"]:hover:before { background-color: #3C5485 }

.social-navigation a[href*="plus.google.com"]:before { content: "\f206"; background-color: #EE6A5F; }
.social-navigation a[href*="plus.google.com"]:hover:before { background-color: #D15E54; }

.social-navigation a[href*="linkedin.com"]:before { content: "\f207"; background-color: #1985BD; }
.social-navigation a[href*="linkedin.com"]:hover:before { background-color: #14709E; }

.social-navigation a[href*="pinterest.com"]:before { content: "\f209"; background-color: #CD1A1D; }
.social-navigation a[href*="pinterest.com"]:hover:before { background-color: #B3171A; }

/* You can extend this four former examples to the rest of social profiles */

Remeber to add to this new social menu the class social-navigation.

Have a nice WordPressing!