Skip to content

Instantly share code, notes, and snippets.

@thewebprincess
Last active Aug 29, 2015
Embed
What would you like to do?
Code for Adding Font Awesome social icons to WordPress Custom Menus using Genesis Hooks - this file is dependent upon the use of the code here in the functions file as well. Source code this is based on from here http://justintadlock.com/archives/2013/08/14/social-nav-menus-part-2
<?php
/** Enqueue Font Awesome from CDN if your theme hasn't already included Font Awesome **/
add_action( 'wp_enqueue_scripts', 'twp_enqueue_awesome' );
/**
* Register and load font awesome CSS files using a CDN.
*
* @link http://www.bootstrapcdn.com/#fontawesome
* @author The Web Princess
*/
function twp_enqueue_awesome() {
wp_enqueue_style( 'prefix-font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', array(), '4.0.3' );
}
/**
* Set up Social Menu Location */
function register_my_menu() {
register_nav_menu('social',__( 'Social Menu' ));
}
add_action( 'init', 'register_my_menu' );
/** Add your Social Menu to genesis_header - you can use other hook locations as you wish **/
add_action( 'genesis_header','twp_genesis_add_social', 10 );
/**
* Set up Custom Menu for Social Icons.
*
* @link http://thewebprincess.com/new-genesis-social-icon-menu/
* @author The Web Princess
*
* @return null Return early if menu does not exist.
*/
function twp_genesis_add_social() {
if ( ! has_nav_menu( 'social' ) ) {
return;
}
echo '<h4 class="social-title widgettitle widget-title">Connect</h4>';
$nav_args = array(
'theme_location' => 'social',
'container' => 'div',
'container_id' => 'menu-social',
'container_class' => 'menu menu-social',
'menu_id' => 'menu-social-items',
'menu_class' => 'menu-items',
'depth' => 1,
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>',
'fallback_cb' => '',
);
wp_nav_menu( $nav_args );
}
/* Social Menu
--------------------------------------------- */
.screen-reader-text {
position: absolute;
top: -9999em;
left: -9999em;
}
.menu-social ul {
list-style: none;
margin: 0 0 25px;
text-align: center;
}
.menu-social ul li {
display: inline-block;
position: relative;
}
.menu-social li a:before {
content: '\f005';
display: inline-block;
padding: 0 5px;
font-family: 'FontAwesome';
font-size: 16px;
vertical-align: top;
-webkit-font-smoothing: antialiased;
}
.menu-social li a[href*="facebook.com"]:before {
content: '\f09a';
/* content: '\f082'; /* facebook-square */
color: #3b5998;
}
.menu-social li a[href*="twitter.com"]:before {
content: '\f099';
/* content: '\f081'; /* twitter-square */
color: #33ccff;
}
.menu-social li a[href*="plus.google.com"]:before {
content: '\f0d5';
/* content: '\f0d4'; /* google-plus square */
color: #dd4b39;
}
.menu-social li a[href*="linkedin.com"]:before {
content: '\f0e1';
color: #0e76a8;
}
.menu-social li a[href*="app.net"]:before {
content: '\f170';
color: #706D73;
}
.menu-social li a[href*="bitbucket.com"]:before {
content: '\f171';
/* content: '\f172'; /* bitbucket-square */
}
.menu-social li a[href*="dribbble.com"]:before {
content: '\f17d';
}
.menu-social li a[href*="flickr.com"]:before {
content: '\f16e';
}
.menu-social li a[href*="foursquare.com"]:before {
content: '\f180';
}
.menu-social li a[href*="github.com"]:before {
content: '\f09b';
/* content: '\f113'; /* github-alt */
/* content: '\f092'; /* github-square */
}
.menu-social li a[href*="instagram.com"]:before {
content: '\f16d';
}
.menu-social li a[href*="linkedin.com"]:before {
content: '\f0e1';
/* content: '\f08c'; /* linkedin-square */
}
.menu-social li a[href*="pinterest.com"]:before {
content: '\f0d2';
/* content: '\f0d3'; /* pinterest-square */
}
.menu-social li a[href*="renren.com"]:before {
content: '\f18b';
}
.menu-social li a[href*="stack-exchange.com"]:before {
content: '\f18d';
}
.menu-social li a[href*="stack-overflow.com"]:before {
content: '\f16c';
}
.menu-social li a[href*="tumblr.com"]:before {
content: '\f173';
/* content: '\f174'; /* tumblr-square */
}
.menu-social li a[href*="vimeo.com"]:before {
content: '\f194';
}
.menu-social li a[href*="weibo.com"]:before {
content: '\f18a';
}
.menu-social li a[href*="xing.com"]:before {
content: '\f168';
/* content: '\f169'; /* xing-square */
}
.menu-social li a[href*="youtube.com"]:before {
content: '\f167';
/* content: '\f16a';/* youtube-play */
/* content: '\f166';/* youtube-square */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment