In WordPress 3.8, there is a new modern, clean style to the admin panel. There is also a choice of admin color schemes which each admin user can set under their Profile:
In order to implement this WordPress have adopted the use of an Icon font specifically, Dashicons by Mel Choyce. The icons in the admin menu down the left of the page change color according to your scheme color preferences. Simply changing the font-color is sufficient to change the icon color.
Therefore in Genesis Club Pro I decided to follow WordPress’s lead and replace the plugin icon image, a PNG file, by an icon font character: the question was which one?
I did not find any suitable icon in Dashicons, so started looking around for other icon fonts and found FontAwesome, a font that truly lived up to its name.
This font was created as part of the Twitter Bootstrap toolkit and hence has lots of variety: social icons, currencies, general signs, and it is continually being updated so offers an ever expanding choice.
Since the Genesis Club Pro Plugin saves you time writing code then I decided on the code symbol </> a.k.a. fa-code
Performance Consideration
Note that for performance reasons the plugin only loads FontAwesome when the site is being accessed by an administrator.
When the plugin is running on the public site it makes use of the Dashicons font. For example, the mobile responsive hamburger menu uses the dashicons-menu icon,
Finally, for any plugin developers among you, here is a tip as to how to add a plugin icon that uses a font other than Dashicons.
Developer Tip: Loading An Icon Font
The PHP to load the font and set up the icon was pretty simple once I had identified the page hook for the plugin, toplevel_page_genesis-club-pro.
When you load the menu using the function add_menu_page, do not specify a menu icon image. This means a generic icon image will be used. You can then override using CSS.
The following in an excerpt of the GenesisClubProAdmin class. FontAwesome is only loaded when running the site as an administrator.
[code]
public static function init() {
// …..
add_action(‘admin_menu’,array(__CLASS__, ‘admin_menu’));
add_action(‘admin_enqueue_scripts’, array(__CLASS__, ‘register_fonts’));
add_action(‘admin_print_styles’, array(__CLASS__, ‘style_icon’));
}
public static function register_fonts() {
global $wp_styles;
wp_enqueue_style(‘font-awesome-styles’, plugins_url(‘styles/font-awesome.min.css’, dirname(__FILE__)), array(), GENESIS_CLUB_VERSION, ‘all’);
wp_enqueue_style(‘font-awesome-ie7’, plugins_url(‘styles/font-awesome-ie7.min.css’, dirname(__FILE__)), array(), GENESIS_CLUB_VERSION, ‘all’);
$wp_styles->add_data(‘font-awesome-ie7’, ‘conditional’, ‘lte IE 7’);
}
public static function style_icon() {
print <<< ICON
<style type="text/css">
#adminmenu .menu-icon-generic.toplevel_page_genesis-club-pro div.wp-menu-image:before { font-family:FontAwesome !important; content: ‘\\f121’; }
</style>
ICON;
}
[/code]
Note that !important was required to override the font-family from dashicons to FontAwesome.
