The right way to Add or Change WordPress Admin Icons (2 Simple Strategies)

Personalizing your WordPress dashboard can enhance the person expertise. One straightforward means to do that is by including or altering admin icons.

Customized icons can enhance your workflow and make it simpler for brand spanking new customers to navigate the admin space of your website. Plus, a customized dashboard is extra fulfilling to make use of.

On this article, we’ll present you the best way to add or change WordPress admin icons. We are going to information you thru the method step-by-step. By the tip, your WordPress dashboard will look contemporary and distinctive.

What Are Admin Icons in WordPress?

Admin icons are the tiny photos you see within the navigation panel of the WordPress admin space. They seem subsequent to every menu merchandise.

These photos use Dashicons, an icon font made for WordPress. It was first launched in 2013 and has not modified since then.

It’s possible you’ll wish to give your WordPress admin space a slight makeover by altering these icons. You possibly can swap out current icons with one thing you want higher and even exchange them with your individual {custom} icons.

In case you are making an internet site for shoppers who should not conversant in WordPress, utilizing {custom} icons might help them navigate the admin dashboard extra simply.

Now, let’s see how one can simply change admin icons. We are going to present you two methods to do this, and you’ll select the one which works greatest for you:

Technique 1: Change Admin Icons in WordPress Admin Utilizing a Plugin

For this technique, we can be utilizing the Admin Menu Editor plugin. Because the identify suggests, it permits you to customise WordPress admin menus simply.

First, it’s worthwhile to set up and activate the Admin Menu Editor plugin. For extra particulars, see our tutorial on the best way to set up a WordPress plugin.

After you may have activated the plugin, go to the Settings » Menu Editor web page. Right here, you will note your WordPress admin menu inside a neat person interface (UI) the place you’ll be able to customise it.

The UI has a toolbar on the prime, which lets you add or delete menu gadgets, add separators, copy and paste gadgets, and extra.

Beneath that, you’ll be able to click on on a menu merchandise to broaden and consider its settings. Right here, we’ve expanded the Posts menu merchandise.

If you broaden any menu merchandise, you will note extra choices. If it’s a mum or dad menu, additionally, you will see any little one menu gadgets in the appropriate column.

So as to add, exchange, or delete a menu icon, click on on the ‘Present superior choices’ hyperlink on the backside.

Now, click on on the button subsequent to the ‘Icon URL’ discipline.

It will reveal a popup the place you’ll be able to see all of the out there Dashicons. Alternatively, you’ll be able to click on on the ‘Media Library’ button to add your individual picture icon.

If you wish to add your individual picture icon, we advocate utilizing a 32×32 picture, ideally in clear PNG format.

After selecting your icon, click on on the ‘Save Adjustments’ button to retailer your settings.

You’ll now see your {custom} menu icon used within the admin menu.

Technique 2: Manually Change Admin Menu Icons Utilizing a Code Snippet

This subsequent technique requires you so as to add some {custom} code to vary icons.

In the event you haven’t executed it earlier than, we advocate taking a fast have a look at our tutorial on including {custom} code in WordPress.

The best and most secure means so as to add {custom} code in WordPress is utilizing WPCode. It’s the greatest WordPress code snippets plugin. It permits you to safely add {custom} code, CSS, and HTML to your WordPress website with out unintentionally breaking something.

Observe: The plugin additionally has a free model referred to as WPCode Lite, which can get the job executed. Nevertheless, the professional model provides you additional options that is likely to be useful.

Instance 1. Changing an Icon Utilizing the Default Dashicons

For this instance, we’ll use the default Dashicons to interchange an icon from the present icon set.

It’s essential to notice that WordPress already masses Dashicons, that are extremely optimized for efficiency. So, utilizing them won’t impression web page load velocity.

That mentioned, earlier than you run the code, it’s worthwhile to word down the next:

The URL for the menu merchandise you wish to change

The icon identify you wish to use

First, it’s worthwhile to discover the web page URL for the menu merchandise you wish to customise. As an illustration, let’s say you wish to change the icon for the ‘Posts’ menu.

Transfer your mouse over to the Posts menu, and you will note the URL it hyperlinks to in your browser’s standing bar on the backside of the web page. You simply want the final a part of the URL, which on this case can be edit.php.

Subsequent, go to the Dashicons web site and click on on the icon you wish to use.

Clicking on any icon will present its identify and slug on the prime. At this level, it’s worthwhile to copy the slug since you’ll want it within the subsequent step.

When you’ve executed that, go to the Code Snippets » + Add Snippet web page and hover your mouse over the ‘Add Your Customized Code (New Snippet)’ field.

Then, merely click on on the ‘+ Add Customized Snippet’ button that seems.

On the subsequent display screen, present a title in your snippet and choose PHP Snippet beneath the Code Kind possibility.

After that, you’ll be able to copy and paste the next code into the code editor field:

Don’t neglect to vary the dashicons-format-aside to the slug you copied earlier.

Your code will appear as if this within the editor:

Subsequent, it’s worthwhile to inform WordPress the place to run this code.

Admin menu icons seem contained in the WordPress admin space. On the identical web page, scroll to the Insertion part and choose ‘Admin Solely’ beneath the Location possibility.

Lastly, change your snippet to Energetic and click on the ‘Save Snippet’ button to save lots of your modifications.

WordPress will now begin utilizing the icon you chose for the Posts web page.

Instance 2. Use Font Superior Icon for a Menu Merchandise in The WordPress Admin Space

The default Dashicon library has a restricted set of icons. The excellent news is that you should utilize a font and icon library like Font Superior, which has a a lot bigger set of icons.

Nevertheless, this implies you’ll have to load Font Superior, which can decelerate your WordPress admin space barely (only some milliseconds).

Earlier than you add any code, first it’s worthwhile to discover the icon you wish to use. Go to the Font Superior web site and change to the Free Library.

You will notice all of the icons out there without cost.

Click on on the icon you wish to use, and it’ll open in a popup. From right here, it’s worthwhile to copy the icon’s Unicode worth.

After that, go to the Code Snippets » + Add Snippet web page in your WordPress dashboard.

Go forward and click on on the ‘+ Add Customized Snippet’ button inside the ‘Add Your Customized Code (New Snippet)’ field.

On the subsequent display screen, present a title in your snippet and choose PHP Snippet because the Code Kind possibility.

After that, you’ll be able to copy and paste the next code into the code editor field:

Don’t neglect to interchange f015 with the Unicode worth you copied earlier.

Your code will appear as if this within the editor:

Subsequent, it’s worthwhile to inform WordPress the place to run this code.

Admin menu icons seem contained in the WordPress admin space, so you’ll be able to scroll to the Insertion part and choose ‘Admin Solely’ because the Location possibility.

Lastly, change your snippet to Energetic and click on on the ‘Save Snippet’ button to save lots of your modifications.

WordPress will now begin utilizing the icon you chose for the Posts web page.

Bonus: Add Icons for Customized Publish Sorts in WordPress

Customized put up sorts will let you create distinctive sorts of content material in your WordPress web site. These should not default posts or pages however one thing completely authentic to your website.

In case you are utilizing a {custom} put up kind in your WordPress web site, you would possibly wish to change its icon so to simply establish it.

In that case, take a look at our detailed tutorial on the topic, which exhibits a number of methods to change or add icons in your {custom} put up sorts.

We hope this text helped you alter or add admin icons in WordPress. You may additionally wish to take a look at the best way to white-label the WordPress admin dashboard or view these skilled recommendations on customizing the WordPress admin space for higher workflows.

In the event you appreciated this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may also discover us on Twitter and Fb.

The put up The right way to Add or Change WordPress Admin Icons (2 Simple Strategies) first appeared on WPBeginner.