Social media navigation menus in WordPress with Socicons

socicons.css

/**
 * Turn links in a WordPress menu into icons linked to social profiles
 *
 * This file implements the social menu icons technique by Justin Tadlock for
 * the Socicon font, which supports a very large number of social network sites.
 *
 * Learn how to set up a social menu from Justin here:
 *
 *		http://justintadlock.com/archives/2013/08/07/social-media-nav-menus
 *
 * To turn a WordPress menu into the social media menu, call the menu in your
 * template files just like Justin recommends, but add the social-icons class
 * to the container:
 *
 *	wp_nav_menu(
 *		array(
 *			'theme_location'  => 'social-media',
 *			'container'       => 'nav',
 *			'container_id'    => 'menu-social-media',
 *			'container_class' => 'menu social-icons', // Add social-icons class
 *			'menu_id'         => 'menu-social-media-items',
 *			'menu_class'      => 'menu-items',
 *			'depth'           => 1,
 *			'link_before'     => '<span class="screen-reader-text">',
 *			'link_after'      => '</span>',
 *			'fallback_cb'     => '',
 *		)
 *	);
 *
 * You must have loaded the Socicons font in your theme and updated the paths
 * to the fonts below. Check out and download the font here:
 *
 *		http://socicon.com/
 *
 * License:     GNU General Public License v2.0 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 */

@font-face {
	font-family: 'socicon';
	src: url('path/to/fonts/socicon-webfont.eot');
	src: url('path/to/fonts/socicon-webfont.eot?#iefix') format('embedded-opentype'),
		 url('path/to/fonts/socicon-webfont.woff') format('woff'),
		 url('path/to/fonts/socicon-webfont.ttf') format('truetype'),
		 url('path/to/fonts/socicon-webfont.svg#sociconregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

.social-icons a:before {
	line-height: 1em;
	width: 1em;
	height: 1em;
	text-align: center;
	display: inline-block;
	font-family: 'socicon' !important;
	font-style: normal;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
}

.social-icons a:empty{
	width: 1em;
}

.social-icons a[href*="easid.cc"]::before { content: "5"; }
.social-icons a[href*="twitter.com"]::before { content: "a"; }
.social-icons a[href*="facebook.com"]::before { content: "b"; }
.social-icons a[href*="google.com"]::before { content: "c"; }
.social-icons a[href*="pinterest.com"]::before { content: "d"; }
.social-icons a[href*="foursquare.com"]::before { content: "e"; }
.social-icons a[href*="yahoo.com"]::before { content: "f"; }
.social-icons a[href*="skype:"]::before { content: "g"; }
.social-icons a[href*="yelp.com"]::before { content: "h"; }
.social-icons a[href*="feedburner.com"]::before { content: "i"; }
.social-icons a[href*="linkedin.com"]::before { content: "j"; }
.social-icons a[href*="viadeo.com"]::before { content: "k"; }
.social-icons a[href*="xing.com"]::before { content: "l"; }
.social-icons a[href*="myspace.com"]::before { content: "m"; }
.social-icons a[href*="soundcloud.com"]::before { content: "n"; }
.social-icons a[href*="spotify.com"]::before { content: "o"; }
.social-icons a[href*="grooveshark.com"]::before { content: "p"; }
.social-icons a[href*="last.fm"]::before { content: "q"; }
.social-icons a[href*="youtube.com"]::before { content: "r"; }
.social-icons a[href*="vimeo.com"]::before { content: "s"; }
.social-icons a[href*="dailymotion.com"]::before { content: "t"; }
.social-icons a[href*="vine.com"]::before { content: "u"; }
.social-icons a[href*="flickr.com"]::before { content: "p"; }
.social-icons a[href*="500px.com"]::before { content: "w"; }
.social-icons a[href*="instagram.com"]::before { content: "x"; }
.social-icons a[href*="wordpress.com"]::before { content: "y"; }
.social-icons a[href*="wordpress.org"]::before { content: "y"; }
.social-icons a[href*="tumblr.com"]::before { content: "z"; }
.social-icons a[href*="blogger.com"]::before { content: "A"; }
.social-icons a[href*="technorati.com"]::before { content: "B"; }
.social-icons a[href*="reddit.com"]::before { content: "C"; }
.social-icons a[href*="dribbble.com"]::before { content: "D"; }
.social-icons a[href*="stumbleupon.com"]::before { content: "E"; }
.social-icons a[href*="digg.com"]::before { content: "F"; }
.social-icons a[href*="envato.com"]::before { content: "G"; }
.social-icons a[href*="behance.net"]::before { content: "H"; }
.social-icons a[href*="delicious.com"]::before { content: "I"; }
.social-icons a[href*="deviantart.com"]::before { content: "J"; }
.social-icons a[href*="forrst.com"]::before { content: "K"; }
.social-icons a[href*="play.com"]::before { content: "L"; }
.social-icons a[href*="zerply.com"]::before { content: "M"; }
.social-icons a[href*="wikipedia.com"]::before { content: "N"; }
.social-icons a[href*="apple.com"]::before { content: "O"; }
.social-icons a[href*="flattr.com"]::before { content: "P"; }
.social-icons a[href*="github.com"]::before { content: "Q"; }
.social-icons a[href*="github.io"]::before { content: "Q"; }
.social-icons a[href*="chime.in"]::before { content: "R"; }
.social-icons a[href*="friendfeed.com"]::before { content: "S"; }
.social-icons a[href*="newsvine.com"]::before { content: "T"; }
.social-icons a[href*="identi.ca"]::before { content: "U"; }
.social-icons a[href*="bebo.com"]::before { content: "V"; }
.social-icons a[href*="zynga.com"]::before { content: "W"; }
.social-icons a[href*="steampowered.com"]::before { content: "X"; }
.social-icons a[href*="xbox.com"]::before { content: "Y"; }
.social-icons a[href*="windows.com"]::before { content: "Z"; }
.social-icons a[href*=".live.com"]::before { content: "Z"; }
/* Outlook skipped. It's not clear what domain it would be attached to */
.social-icons a[href*="coderwall.com"]::before { content: "2"; }
.social-icons a[href*="tripadvisor.co"]::before { content: "3"; }
.social-icons a[href*="netcod.es"]::before { content: "4"; }
.social-icons a[href*="lanyrd.com"]::before { content: "7"; }
.social-icons a[href*="slideshare.net"]::before { content: "8"; }
.social-icons a[href*="bufferapp.com"]::before { content: "9"; }
.social-icons a[href*=".rss"]::before { content: ","; }
.social-icons a[href*="vk.com"]::before { content: ";"; }
.social-icons a[href*="disqus.com"]::before { content: ":"; }

/**
 * Only show labels to screen readers
 * h/t Bootstrap: getbootstrap.com
 */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
}
.screen-reader-text:focus {
	background-color: #fff;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #000;
	display: block;
	font-size: 16px;
	font-weight: bold;
	height: auto;
	line-height: normal;
	padding: 15px 23px 14px;
	position: absolute;
	left: 5px;
	top: 5px;
	text-decoration: none;
	width: auto;
	z-index: 100000;
}