Social Icons Menu

functions.php

<?php
/**
 * Sets up theme defaults and registers support for various WordPress features.
 */
 function theme_slug_setup() {

	// Register Social Icons Menu.
	register_nav_menu( 'social', esc_html__( 'Social Icons', 'theme-slug' ) );
	
}

/**
 * Enqueue scripts and styles.
 */
function theme_slug_scripts() {

	// Register Genericons.
	wp_enqueue_style( 'genericons', get_template_directory_uri() . '/css/genericons/genericons.css', array(), '3.4.1' );

}

header.php

<div class="header-main container clearfix">

	<?php
	// Check if there is a social menu.
	if( has_nav_menu( 'social' ) ) :
			
		// Display social menu.
		wp_nav_menu( array(
			'theme_location' => 'social',
			'container' => false,
			'menu_class' => 'social-icons-menu',
			'echo' => true,
			'fallback_cb' => '',
			'link_before' => '<span class="screen-reader-text">',
			'link_after' => '</span>',
			'depth' => 1,
			)
		);
	
	endif; ?>

</div><!-- .header-main -->

style.css

.social-icons-menu {
	margin: 0;
	padding: 0;
	list-style-position: outside;
	list-style-type: none;
	line-height: 1;
}

.social-icons-menu li {
	float: left;
	margin: 0;
	padding: 0;
}

.social-icons-menu li a {
	position: relative;
	display: inline-block;
	padding: 0.5em;
	text-decoration: none;
}

.social-icons-menu li a .screen-reader-text {
	display: none;
}

.social-icons-menu li a:before {
	display: inline-block;
	color: #333;
	vertical-align: top;
	text-decoration: inherit;
	font-size: 24px;
	font-family: 'Genericons';
	line-height: 1;
	content: '\f408'; /* Default Icon */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.social-icons-menu li a:hover:before {
	color: #777;
}

.social-icons-menu li a[href*="facebook.com"]:before { content: '\f204'; }
.social-icons-menu li a[href*="plus.google.com"]:before { content: '\f218'; }
.social-icons-menu li a[href*="github.com"]:before { content: '\f200'; }
.social-icons-menu li a[href*="instagram.com"]:before { content: '\f215'; }
.social-icons-menu li a[href*="linkedin.com"]:before { content: '\f207'; }
.social-icons-menu li a[href*="pinterest.com"]:before { content: '\f209'; }
.social-icons-menu li a[href*="twitter.com"]:before { content: '\f202'; }
.social-icons-menu li a[href*="vimeo.com"]:before  { content: '\f212'; }
.social-icons-menu li a[href*="youtube.com"]:before { content: '\f213'; }