🚀 Is building a website too difficult? Let me guide you step by step—Learn about the 「Naibabiji WordPress Website Building Coaching Service」 →

WordPress Admin Dashboard Call and Disable Dashicons Font Icon Method

Hello everyone, I am Brother Leifeng. Sometimes when helping others write WordPress backend features, you need to add icons to the function menu. Here I'll teach you how to reference Dashicons font icons, so you don't need to separately reference other icon files. Since WordPress 3.8, the admin menu in the backend has supported Dashicons font icons. As a Theme or Plugin developer, you should also keep up with the times.wordpress图标文件

About Dashicons

Dashicons is an open-source font icon project, currently hosted on GitHub. It is currently mainly used in the WordPress backend, but of course, you can also use it in your own Theme or Plugin. View Dashicons font icons:https://developer.wordpress.org/resource/dashicons/

How to use?

Using Dashicons in Custom Post TypesIf we use ‚dashicons-images-alt2‘ as the menu icon, then the relevant code should be as follows:
register_post_type('slides', array( 'labels' => array( 'name' => 'Slides', 'singular_name' => 'Slide' ), 'public' => true, 'has_archive' => true, 'menu_icon' => 'dashicons-images-alt2' ) );
Using Dashicons in Plugin Top-Level MenusYou can also use Dashicons when creating plugin menus, for example, using the add_menu_page() function to add a top-level menu as shown below:
add_menu_page( 'Menu Page Title', 'Menu Title', 'manage_options', 'menu-slug', 'mytheme_menu_callback', 'dashicons-wordpress' // Dashicon 图标的CSS类 );
The two code examples above are considered quite common; other locations are rarely used.

Disable Dashicons

Conversely, if you don't want the backend to load Dashicons, you can also disable it, which can reduce the loading of about 30kb of style files and improve backend speed. Open the Theme's functions.php file and add the following code:
// remove dashicons
function wpdocs_dequeue_dashicon() {
if (current_user_can( 'update_core' )) {
return;
}
wp_deregister_style('dashicons');
}
add_action( 'wp_enqueue_scripts', 'wpdocs_dequeue_dashicon' );
It's important to note that if your Theme uses Dashicons icons, it is not recommended to disable them, as this may cause icons not to display or become misaligned.Other recommended articles:

🚀 Still feeling confused after reading the tutorial? Let me guide you step-by-step.

「Naibabiji WordPress Website Building Coaching Service」—From choosing a domain and buying hosting, to installing a Theme and publishing content, I「ll coach you through every step, helping you avoid detours and reach your goal directly.

👉 Learn about the Website Building Coaching Service
🔒

Comments are closed

The comment function for this article is closed. If you have any questions, please feel free to contact us through other channels.

×
二维码

Scan QR Code to Follow

AI Website Building Assistant

🤖
Hello! I am the Naibabiji AI Assistant. How can I help you?
Quick Consultation: