3

How to Add Font Awesome Icons to WordPress Menus

  • 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
5

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.

2

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

0

Step by Step example using FontAwesome:

Including color and custom post types 👍

1 Pick an icon

2 Get the SVG

Bring the SVG into Wordpress

  • Inside your functions.php, where you register your custom post type, add the following snippet:

    add_action('init', 'my_init');
    function my_init() {
        register_post_type('labs', [
            'label' => 'Labs',
            // .. ect
            'menu_icon' => 'data:image/svg+xml;base64,' . base64_encode('<svg width="20" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M1591 1448q56 89 21.5 152.5t-140.5 63.5h-1152q-106 0-140.5-63.5t21.5-152.5l503-793v-399h-64q-26 0-45-19t-19-45 19-45 45-19h512q26 0 45 19t19 45-19 45-45 19h-64v399zm-779-725l-272 429h712l-272-429-20-31v-436h-128v436z"/></svg>')
         ]);
    }
    

Important notes:

  • The contents of base64_encode is the copied raw string from Font Awesomes github page.
  • You need to change two small things within the svg string:
    • 1: Add a fill="black" attribute to the path/s elements - this allows the color to be change by Wordpress.
    • 2: (optional) Change the width and height to 20, as this is the admin width/height size and seems to result it a crisper result.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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