Learn How to Load or Swap WordPress Admin Icons (2 Simple Strategies)

Customizing your wordpress dashboard can support individual enjoyment. An easy way to try this is to use together or change the admin icons.

Custom-designed icons can support your workflow and make it easier for new buyers to navigate the admin area of ​​your website. Additionally, a custom-designed dashboard is further enjoyable to use.

In this article, we will show you how to add or change wordpress admin icons. We will provide you with data throughout the process step by step. Plus, your wordpress dashboard will look fresh and unique.

<span class=”ez-toc-section” id=”what-are-admin-icons-in-wordpress“/>What are admin icons in wordpress?

Admin icons are the little images you see in the navigation panel of your wordpress admin area. They appear next to each product on the menu.

Those images use Dashicons, an icon font created for wordpress. It was first offered in 2013 and hasn’t changed since.

We recommend giving your wordpress admin area a little makeover by changing the icons. You will be able to transfer the icons with something you like on top or even replace them with your own custom icons.

If you’re building an online website for users who don’t seem to focus on wordpress, using custom icons can help them further navigate the admin dashboard.

Now let’s see how you will be able to simply change the admin icons. We will show you two tactics to check this and you will also be ready to choose the one that works best for you:

<h4 class=”wp-block-heading” id=”aioseo-method-1-change-admin-icons-in-wordpress-admin-using-a-plugin”><span class=”ez-toc-section” id=”manner-1-industry-admin-icons-in-wordpress-admin-using-a-plugin”/>Method 1: Sector admin icons in wordpress admin using a plugin

For the program we will use the Admin Menu Editor plugin. For the reason suggested by the identification, it means that you will simply customize the wordpress admin menus.

First, you want to insert and change the Admin Menu Editor plugin. For more details, see our training on methods to set up a wordpress plugin.

After activating the plugin, go to the file Settings » Menu Editor internet web page. Right here, you will see the wordpress admin menu inside a neat user interface (UI) where you will be able to customize it.

The user interface has a more productive toolbar, which helps you add or delete menu items, add separators, copy and paste items, and more.

Below, you will be able to click on a product in the menu to extend it and read its settings. Right here, the products in the Post menu have been expanded.

As you create menu items, you will see additional possible choices. If it’s a dad or mom menu, you’ll also see all the child menu items in the correct column.

Intending to load, replace, or delete a menu icon, click the “Show Complicated Possible Choices” link below.

Now click the button next to the “Icon URL” field.

Occasionally, an increasing number of people may see a popup where you will be able to see all available Dashicons. On the other hand, you will be able to click the “Media Library” button to add your image icon.

If you want to upload your own image icon, we recommend using a 32&instances;32 image, preferably in transparent PNG format.

After choosing your icon, click the “Save Changes” button to store your settings.

You will now see your custom menu icon used in the admin menu.

The next method requires the intention to load some custom code to change the icons.

In case you happen to not have finished it before, we recommend you take a quick look at our tutorial on embedding traditional code in wordpress.

The perfect and maximum protected means with the intention of uploading custom code into wordpress is the use of WPCode. It is the most productive wordpress code snippet plugin. It means you will safely add custom code, CSS, and HTML to your wordpress website without accidentally breaking the rest.

Remember: The plugin also has an unlocked version known as WPCode Lite, which is capable of completing the process. On the other hand, the professional type will provide you with additional choices that may be useful.

Example 1. Converting an icon using default Dashicons

For this situation, we will use the default Dashicons to change an icon from the existing icon set.

It’s important to note that wordpress already has so many Dashicons, which are amazingly optimized for power. Therefore, their use will have no effect on the loading speed of the web page.

That said, before running the code, you want to note the following:

1. The URL of the menu products you want to change
2. The icon identifies which you wish to use

First, you want to search for the Internet web page URL for the menu products you want to customize. For example, let’s say you want to change the icon for the “Posts” menu.

Hover over the Posts menu and you will also see the URL it links to in your browser’s status bar at the bottom of the Internet web page. You simply need an equal part of the URL, which in this case can also be edit.php.

Next, go to the Dashicons website online and click on the icon you want to use.

Clicking on any icon will show its identity and slug on the most productive one. At this point, you want to copy the slug because you will need it in the next step.

Whenever you finish it, go to the Code Snippet » + Add snippet Internet web page and place your mouse over the “Add your custom code (new snippet)” box.

Then, simply click the “+Add custom snippet” button that appears.

In the next show, provide a reputation for your snippet and select PHP Snippet under the Risk Code Type.

Next, you will be able to copy and paste the following code into the code editor box:

function change_post_menu_icon() {
    international $menu;
    
    // Loop all through the menu items
    foreach ($menu as $key => $menu_item) {
        // To search out the "Posts" menu products (default URL is 'edit.php')
        if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {
            // Industry the icon to any other Dashicon class
            $menu[$key][6] = 'dashicons-format-aside'; // Industry this for your hottest Dashicon slug
        }
    }
}
add_action('admin_menu', 'change_post_menu_icon');

Don’t forget to change the dashicons-format-aside to the slug you copied previously.

Your code will look like this throughout the editor:

Next, you will need to tell wordpress where to run this code.

Admin menu icons appear throughout the wordpress admin area. On the similar web page, scroll down to the onboarding step and select “Admin Only” under Location Risk.

In any case, change your snippet to Full of Life and click the “Save Snippet” button to save many of your changes.

wordpress will now begin using the icon you chose for your Post Internet web page.

Example 2. Use the Font Awesome icon for a Products menu in your wordpress admin area

The default Dashicon library has a limited set of icons. The good news is that you will be able to use a font and icon library like Font Awesome, which has a much higher icon set.

On the other hand, this means that you will have to load Font Awesome, which may slow down the wordpress admin area quite a bit (just a few milliseconds).

Faster than you add any code, you first need to search for the icon you want to use. Go to the Font Awesome website and navigate to the Loose Library.

You will see all available icons without spending a penny.

Click on the icon you want to use and it will open in a popup. From here, you want to copy the Unicode value of the icon.

Next, cross the Code Snippet » + Add snippet Internet web page in your wordpress dashboard.

Go ahead and click the “+Add custom snippet” button until you reach the “Add your custom code (new snippet)” box.

In the next show, provide a reputation for your snippet and choose a PHP snippet because the code type is at risk.

Next, you will be able to copy and paste the following code into the code editor box:

// Enqueue Font Awesome throughout the admin area
function enqueue_font_awesome() {
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
}
add_action('admin_enqueue_scripts', 'enqueue_font_awesome');

// Add custom class to the Posts menu products
function add_custom_post_menu_class() {
    international $menu;

    foreach ($menu as $key => $menu_item) {
        if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {
            $menu[$key][4] .= ' custom-post-menu-class';
        }
    }
}
add_action('admin_menu', 'add_custom_post_menu_class');

// Add custom CSS to switch the icon to a Font Awesome icon
function custom_admin_menu_icon() {
    echo '
        .custom-post-menu-class .wp-menu-image:forward of {
            font-family: "Font Awesome 5 Loose" !important;
            content material subject matter: "f015"; /* Unicode for the Font Awesome icon */
            font-weight: 900; /* Sought after for cast icons */
        }
    ';
}
add_action('admin_head', 'custom_admin_menu_icon');

Don’t fail to change f015 with the previously copied Unicode value.

Your code will look like this throughout the editor:

Next, you will need to tell wordpress where to run this code.

Admin menu icons appear in the wordpress admin area, so you can scroll down to the onboarding step and select “Admin Only” for location risk.

In any case, change your snippet to Full of Life and click the “Save Snippet” button to save many of your changes.

wordpress will now begin using the icon you chose for your Post Internet web page.

<span class=”ez-toc-section” id=”bonus-add-icons-for-custom-designed-put-up-sorts-in-wordpress“/>Bonus: Add Icons for Custom Installation Types in wordpress

Custom-designed post sorts help you create unique varieties of content topics for your wordpress website. Those don’t appear to be pre-defined posts or pages, but something totally distinctive for your website.

If you use a traditional type of installation in your wordpress website, you may want to change its icon to simply identify it.

If so, check out our detailed tutorial on the topic, which features some tactics for toggling or loading icons into your traditional installation varieties.

We hope this article has helped you convert or add admin icons in wordpress. You may also want to check out methods to white label your wordpress admin dashboard or view those recommended by professionals on customizing your wordpress admin space for superior workflows.

If you prefer this article, subscribe to our YouTube channel for wordpress video tutorials. You can also search for us Twitter and Facebook.

The post Learn How to Load or Swap wordpress Admin Icons (2 Simple Strategies) appeared first on WPBeginner.

wordpress maintenance

[ continue ]

wordpress Maintenance Plans | wordpress hosting

Read more