Wordpress Custom Dashicons

For a wordpress admin menu item you can have a custom icon which can be a simple image or a dashicon. Dashicons is actually a web font and you can choose one from the official icons font. I will explain how to add your own custom icon.

Dashicons in wordpress

What are dashicons

Dashicons, Fontawesome and Glyphicons are all combination of two things - a predefined css classes and a custom web font which contains symbols (icons, glyphs) instead of a letters.

When you add a predefined class you set a font on the element to that custom font and icon is selected via content css property which will choose one of the characters available in the font.

How to do it

First find and download or make the SVG icon and then make a font with the online tools. There are lot of these tools. I used glyphter.

Drag and drop you SVG in to the slot and choose name for the icon.

Click on settings button, give your font a name my-plugin-name (or use your plugin name) and set class prefix to dashicons-. Save settings, download and save the zip file. Unpack it and put the css and fonts folders in to your plugin root dir.

Now lets register our new style:

wp_register_style('my_plugin_name_dashicons', plugins_url( MY_PLUGIN_NAME.'/css/my-plugin-name.css'));
wp_enqueue_style('my_plugin_name_dashicons');

And now when you create the menu page just add your icon like it is a built in icon.

add_menu_page('My Plugin Settings', 'My Plugin Name', 'administrator', MY_PLUGIN_NAME, 'my_plugin_settings_page', 'dashicons-hanger');

Author

I plan to write more articles about common laravel components. If you are interested let’s stay in touch.
comments powered by Disqus