4 comments

1. 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

3. Step by Step example using FontAwesome:

   Including color and custom post types 👍

   1 Pick an icon

   • Goto: http://fontawesome.io/icons/
   • Pick an icon, I have chosen “fa-flask” for this example.

   2 Get the SVG

   • Goto: https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg
   • Find the icon, it will be the name without the fa prefix – in my case, that is “flask.svg”.
   • Click the icon, then click “Raw” in Github

   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.

   

4. You can add directly svg as url format inside add_menu_page. Modified a little @Chris answer above.

   add_menu_page( string $page_title, string $menu_title, string $capability, string $menu_slug, callable $callback = '', string $icon_url = '', int|float $position = null ): string
   

   example:

   add_menu_page( 'page_title', 'menu_title',
            'manage_options', 
            'menu_slug', 
             array( $this, 'callback' ) ,
             'data:image/svg+xml;base64,' . base64_encode('<svg width="20" height="20" fill="black" ?rest svg code here? </svg>')
   , 30);
   

Comments are closed.