Skip to content

Instantly share code, notes, and snippets.

@nfreader
Last active August 29, 2015 14:11
Show Gist options
  • Save nfreader/8d212fd8c5a8a7b7e280 to your computer and use it in GitHub Desktop.
Save nfreader/8d212fd8c5a8a7b7e280 to your computer and use it in GitHub Desktop.

Here's a Wordpress snippet that will:

  1. Implement shortcodes to let you quickly insert a Font Awesome icon
  2. Properly loads the Font Awesome stylesheet (via CDN)

Add to your theme's functions.php file. Usage in content:

[fa icon='github'] for a single icon

[fa-btn icon='github' bg='square'(optional)] for stacked icons

If you need additional stack variations, use the function as a starting point.

I make no claims about being an expert and if anyone has any useful feedback or comments, I'd greatly appreciate hearing them :)

<?php
function fa_shortcode ($atts) {
$a = shortcode_atts(array(
'icon'=>'wordpress'
),$atts);
return "<i class='fa fa-".$a['icon']."'></i>";
}
add_shortcode('fa','fa_shortcode');
function fa_button($atts) {
$a = shortcode_atts(array(
'icon'=>'wordpress',
'bg'=>'circle',
),$atts);
return "<span class='fa-stack fa-lg'><i class='fa fa-".$a['bg']." fa-stack-2x'></i><i class='fa fa-".$a['icon']." fa-stack-1x fa-inverse'></i></span>";
}
add_shortcode('fa-btn','fa_button');
function load_fa() {
wp_register_style('fa','//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');
wp_enqueue_style('fa');
}
add_action( 'wp_enqueue_scripts', 'load_js' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment