-
-
Save thewebprincess/e2609c4e9672ce176af5 to your computer and use it in GitHub Desktop.
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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 ); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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