
Simple add the following to your theme’s functions.php to load Dashicons on the front-end (insert via a child theme if you are customizing an existing theme and not making your own).

#Wordpress set icon generator#
While the most heavily used and popular font icon set out there is FontAwesome and it works great for most projects it is also a very large icon set including many icons you probably would never use you could use a font generator website such as Fontello to create a stylesheet of only the icons you need, but another alternative is to useDashicons which is already included in your WordPress installation all you have to do is load the scripts on the front end. Using Dashicons on the Front-End Theme DesignĪ lot of themes these days make use of icons for the front-end for things like post meta (date, category, tag, author) as well as header icons such as user, search and shop icons. Now your post type icons will match the default WP UI and look good. I don’t know if you remember, but before Dashicons you would have to set a custom image URL for your post type icon and when you were using many plugins on the site often times icons didn’t match and the admin looked pretty bad. Simply visit the Dashicons landing page and click on any icon you would like to use and you’ll see the classname at the top next to the icon so you can copy and paste it.Įxample: // Register a new custom post type named Portfolioīelow is a screenshot showing how the Dashicon icon would look like for the portfolio post type. You can click Customize along the top bar (if you’re viewing pages on your site), or.
#Wordpress set icon how to#
When you register a new custom post type in WordPress all you have to do is set the menu_icon argument equal to the CSS classname of the Dashicon you wish to use and this icon will be defined as the icon displayed on the left hand-hand-side of your custom post type name in the WordPress admin panel. How to Change the Site Icon of Your WordPress Site Collect the image that you’ll use as your site icon (if it’s not already on your WordPress site).

Best of all, it’s very easy! Using Dashicons For Custom Post Types These icons while they were built for core they can be used in your own custom plugins and themes, not only when defining custom post types or creating custom admin panels but also on the front-end theme design if you wish. Dashicons are a built-in core set of font icons in WordPress that were introduced back in WordPress 3.8 when they did the massive backend UI redesign and by default are used for the various links on the left-hand admin bar.
