Skip to content

Instantly share code, notes, and snippets.

@NateWr
Created February 17, 2014 17:41
Show Gist options
  • Save NateWr/9055385 to your computer and use it in GitHub Desktop.
Save NateWr/9055385 to your computer and use it in GitHub Desktop.
Social media navigation menus in WordPress with Socicons
/**
* 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment