Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Make Simple Social Icons a little more awesome with FontAwesome.
<?php
// do NOT include the opening tag
add_filter( 'simple_social_default_glyphs', 'rgc_simple_social_icons_glyphs' );
function rgc_simple_social_icons_glyphs( $glyphs ) {
$glyphs = array(
'bloglovin' => '<span class="fa fa-heart"></span><span class="screen-reader-text">Bloglovin</span>',
'dribbble' => '<span class="fa fa-dribbble"></span><span class="screen-reader-text">Dribbble</span>',
'email' => '<span class="fa fa-envelope"></span><span class="screen-reader-text">Email</span>',
'facebook' => '<span class="fa fa-facebook"></span><span class="screen-reader-text">Facebook</span>',
'flickr' => '<span class="fa fa-flickr"></span><span class="screen-reader-text">Flickr</span>',
'github' => '<span class="fa fa-github"></span><span class="screen-reader-text">Github</span>',
'gplus' => '<span class="fa fa-google-plus"></span><span class="screen-reader-text">Google+</span>',
'instagram' => '<span class="fa fa-instagram"></span><span class="screen-reader-text">Instagram</span>',
'linkedin' => '<span class="fa fa-linkedin"></span><span class="screen-reader-text">Linkedin</span>',
'pinterest' => '<span class="fa fa-pinterest"></span><span class="screen-reader-text">Pinterest</span>',
'rss' => '<span class="fa fa-rss"></span><span class="screen-reader-text">RSS</span>',
'stumbleupon' => '<span class="fa fa-stumbleupon"></span><span class="screen-reader-text">Stumbleupon</span>',
'tumblr' => '<span class="fa fa-tumblr"></span><span class="screen-reader-text">Tumblr</span>',
'twitter' => '<span class="fa fa-twitter"></span><span class="screen-reader-text">Twitter</span>',
'vimeo' => '<span class="fa fa-vimeo-square"></span><span class="screen-reader-text">Vimeo</span>',
'youtube' => '<span class="fa fa-youtube"></span><span class="screen-reader-text">Youtube</span>',
);
return $glyphs;
}
<?php
// do NOT include the opening tag above
add_action( 'wp_enqueue_scripts', 'rgc_simple_social_icons_fontawesome' );
/**
* Enqueue FontAwesome stylesheet
*/
function rgc_simple_social_icons_fontawesome() {
wp_enqueue_style( 'fontawesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css', array(), '4.3.0' );
}
add_filter( 'simple_social_default_css', 'rgc_simple_social_icons_css' );
/**
* Replace Simple Social Icons' stylesheet
*/
function rgc_simple_social_icons_css( $css_file ) {
$css_file = get_stylesheet_directory_uri() . '/simple-social-icons.css';
// $css_file = ''; // alternate method: if you want to just add your styling to your theme styesheet
return $css_file;
}
add_filter( 'simple_social_default_glyphs', 'rgc_simple_social_icons_glyphs' );
/**
* Replace Simple Social Icons's glyphs with FontAwesome
*/
function rgc_simple_social_icons_glyphs( $glyphs ) {
$glyphs = array(
'bloglovin' => '<span class="fa fa-heart"></span>',
'dribbble' => '<span class="fa fa-dribbble"></span>',
'email' => '<span class="fa fa-envelope"></span>',
'facebook' => '<span class="fa fa-facebook"></span>',
'flickr' => '<span class="fa fa-flickr"></span>',
'github' => '<span class="fa fa-github"></span>',
'gplus' => '<span class="fa fa-google-plus"></span>',
'instagram' => '<span class="fa fa-instagram"></span>',
'linkedin' => '<span class="fa fa-linkedin"></span>',
'pinterest' => '<span class="fa fa-pinterest"></span>',
'rss' => '<span class="fa fa-rss"></span>',
'stumbleupon' => '<span class="fa fa-stumbleupon"></span>',
'tumblr' => '<span class="fa fa-tumblr"></span>',
'twitter' => '<span class="fa fa-twitter"></span>',
'vimeo' => '<span class="fa fa-vimeo-square"></span>',
'youtube' => '<span class="fa fa-youtube"></span>',
);
return $glyphs;
}
/* Screen Readers
------------------------------- */
.screen-reader-text,
.screen-reader-text span,
.search-form label {
clip: rect(0, 0, 0, 0);
height: 0;
position: absolute;
width: 0;
}
.simple-social-icons {
overflow: hidden;
}
.simple-social-icons ul {
margin: 0;
padding: 0;
}
.simple-social-icons ul li {
float: left;
margin: 3px;
padding: 0;
border: none;
background: none;
list-style-type: none;
}
.simple-social-icons ul li a {
display: inline-block;
box-sizing: content-box;
width: 1em;
border: none;
font-family: "fontawesome";
font-weight: normal;
font-style: normal;
font-variant: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1em;
text-align: center;
text-decoration: none;
text-transform: none;
speak: none;
}
.simple-social-icons ul.aligncenter {
text-align: center;
}
.simple-social-icons ul.aligncenter li {
display: inline-block;
float: none;
}
@GaryJones

This comment has been minimized.

Copy link

@GaryJones GaryJones commented Nov 8, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment