Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

How to Add Font Awesome Icons to WordPress Menus

share|improve this question
    
do you know css classes can be added to the wp menu items? –  Dipesh Kc Dec 16 '13 at 7:15
    
Yes i want back-end use . can you help me –  Chirag Pipariya Dec 16 '13 at 7:16
    
you can check this link sevenspark.com/how-to/… for addition of CSS classes to WordPress menu item –  Sabita Sahoo Dec 16 '13 at 8:05

2 Answers 2

up vote 2 down vote accepted

I assume you are wanting to add custom icons to the dashboard? Well with the latest update in wordpress to 3.8, dashboard icons have changed. They are now actually a font. This is actually quite cool as fonts can easily change colors with css and are responsive in size as well.

First I will tell you how to add a custom icon using the pre-built dashicons that have been created by the MP6 team (developers of the latest dashboard). Head on over to http://melchoyce.github.io/dashicons/ to view all of the currently available dashicons. If you want to make a change to a current menu item, this is the function to do it. Add this to your themes' functions.php file or to your custom plugin. This would change the default icon for the "Posts" menu:

function custom_post_css() {
   echo "<style type='text/css' media='screen'>
       #adminmenu .menu-icon-post div.wp-menu-image:before {
            content: '\\f337'; // this is where you enter the dashicon font code
        }
     </style>";
}
add_action('admin_head', 'custom_post_css');

If you want to add a icon for a custom post type, it is much the same with a little twist:

function cptname_custom_css() {
   echo "<style type='text/css' media='screen'>
       #adminmenu .menu-icon-cptname div.wp-menu-image:before {
            content: '\\f337'; // this is where you enter the dashicon font code
        }
     </style>";
}
add_action('admin_head', 'cptname_custom_css');

Insert your custom post type name in place of "cptname". Now the twist. We have to add a class to our custom post type css. To do this, we simply add a line of code to our custom post type registration hook:

'menu_icon' => '',

So our whole registration hook looks like so:

$args = array(
 'labels' => $labels,
 'menu_icon' => '',
 'public' => true,
 'publicly_queryable' => true,
 'show_ui' => true, 
 'show_in_menu' => true, 
 'query_var' => true,
 'rewrite' => true,
 'capability_type' => 'post',
 'has_archive' => true, 
 'hierarchical' => false,
 'menu_position' => null,
 'supports' => array('title', 'editor', 'thumbnail')
); 
 register_post_type('cptname',$args);
}

Now, if you want to use the font awesome icons, we just need to upload them to our theme. Download the font and put the CSS and font files in the appropriate folder of your current theme. Then we need to add some more code to our themes functions.php file or your custom plugin:

function my_custom_fonts() {
<style>
 @font-face {
     font-family: FontAwesome;
     src: url(/path-to-font-folder/fontawesome-webfont.woff);
 }
</style>
}

add_action('admin-init', 'my_custom_fonts');

And now we use the code above to selectively pick our new icons. This would once again change the "Posts" menu icon using the FontAwesome icon set:

function custom_post_css() {
   echo "<style type='text/css' media='screen'>
       #adminmenu .menu-icon-post div.wp-menu-image:before {
            font-family:  FontAwesome !important;
            content: '\\fa-apple'; // this is where you enter the dashicon font code
        }
     </style>";
}
add_action('admin_head', 'custom_post_css');

Hope this helps you. I haven't actually used the font awesome icons yet, but have been customizing my dashboard icons already. I'm loving the latest dashboard overhaul, but there is a learning curve.

Just made an edit: I tried out some things here and actually used the font-awesome icons on my own site:

add this to your functions.php or plugin:

function font_admin_init() {
   wp_enqueue_style('font-awesome', 'http://netdna.bootstrapcdn.com/fontawesome/3.1.1/css/font-awesome.css'); 
}

add_action('admin_init', 'font_admin_init');

then add this to select the actual icon:

function custom_post_css() {
   echo "<style type='text/css' media='screen'>
       #adminmenu .menu-icon-post div.wp-menu-image:before {
            font-family:  FontAwesome !important;
            content: '\\f0f2'; // this is where you enter the fontaweseom font code
        }
     </style>";
}
add_action('admin_head', 'custom_post_css');

You can find the codes listed in the css file.

share|improve this answer

For Front End, I'm using this:

// Add font awesome CSS http://fortawesome.github.io/Font-Awesome/examples/
function awesome_css() {
    wp_enqueue_style("fontawesome", 'http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css');
}
add_action( 'wp_enqueue_scripts', 'awesome_css' );

To add in Admin, have a look here: https://github.com/raket/fontawesome-for-wordpress/blob/master/fontawesome.php which seems to have a solution that would work

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.