Mastering WordPress Dashicons: A Comprehensive Guide for Beginners

WordPress Dashicons are a fantastic way to enhance your website’s design without changing the theme frequently. Discover how to use them effectively.

What Are WordPress Dashicons?

WordPress Dashicons is a set of font icons included in WordPress core since version 3.8. With over 300 scalable and lightweight SVG format icons ready to use, they allow you to enhance your website’s design without affecting its page speed. Dashicons are perfect for beginners and intermediates looking to add a touch of style to their WordPress dashboards.

How to Use and Display Dashicons in WordPress

The Dashicons library is available in your WordPress admin dashboard by default. However, to use them on your theme, you’ll need to enable them manually.

Enabling Dashicons on Your WordPress Site

To enable Dashicons, you’ll need to make a small edit to your theme’s functions.php file:

Navigate to Appearance → Theme File Editor in your WordPress admin area.
Open the functions.php file.
Add the following code snippet at the bottom of the file:

add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); }

Once done, select Update File. You can now use Dashicons on the front end of your WordPress site. Remember to add the code to your child theme to prevent future theme updates from reverting the changes.

Finding Dashicon HTML and CSS Codes

After enabling Dashicons for your site’s front end, you can add icons to posts, pages, or parts of your theme. Here’s how:

Access the Dashicons icon library on the WordPress Developer Resources.
Click on your chosen icon, hit the Copy HTML link, and copy the Dashicons HTML code from the popup window.
Go to Appearance → Menus from your WordPress dashboard and paste the HTML code into the Navigation Label textbox before the text.
Click Save Menu.

Besides HTML, Dashicons also provide CSS code to streamline your website-building process. Use the filter function to find a specific font icon and copy the appropriate code anywhere within your WordPress website using a text editor.

Creating Custom Icons With Dashicons

The Dashicons project stopped accepting icon requests in 2020. However, you can still create custom icons by modifying them using CSS code. Here’s a code snippet to resize and change the color of a Dashicon:

.dashicons { font-size: 50px; width: 50px; height: 50px; color: blue; }

Place it in your style.css file, ensuring the CSS selector targets your chosen element for this method to work.

Adding Dashicons to WordPress Custom Post Types

Custom post types appear inside the admin menu, and you can add Dashicons to them for a more pleasing dashboard. Here’s how using the Custom Post Type UI plugin:

Install and activate the plugin.
Open the Edit Post Types tab and select a custom post type.
Scroll to the Menu Icon section, click Choose dashicons, and pick an icon.
Click Save Post Type.

Removing Dashicons in WordPress

While Dashicons are only around 30 KB, you can improve page speed by disabling them if not in use. Add this code to your functions.php file:

function disable_dashicon() { if (current_user_can( 'update_core' )) { return; } wp_deregister_style('dashicons'); } add_action( 'wp_enqueue_scripts', 'disable_dashicon' );

This will disable Dashicons for logged-in users on the front end.

Looking to enhance your WordPress experience? Consider using Hostinger for reliable hosting solutions that cater to your website’s needs.

WordPress Dashicons FAQs

What Are Some of the Best Dashicons for WordPress?

Some of the best Dashicons for WordPress include admin-home, admin-tools, admin-users, admin-post, admin-media, welcome-widgets-menus, and format-image icons. These are commonly used for various functions in the dashboard.

Do I Need Dashicons in WordPress?

Dashicons are not necessary for your site’s functionality, but they enhance visual design. If removed, some plugins or themes relying on them may appear differently.

How Do I Add Custom Dashicons to WordPress?

To add custom Dashicons, use the @font-face rule in your CSS and include the custom Dashicons font file. Use the content property to display the icon using a :before or :after pseudo-element.

What Is the Size of Dashicons in WordPress?

Dashicons are 20px by 20px by default. You can adjust this size using CSS by changing the font-size property or using a custom font file with different dimensions.

Conclusion

Dashicons are a valuable feature for enhancing your WordPress site’s design without adding unnecessary images. They’re lightweight, easy to embed, and supported natively by WordPress. This guide has shown you how to display and disable Dashicons, giving you the tools to use this popular icon library effectively. If you have any questions, feel free to leave a comment below.

Starter-Pack HTML

Mar 26, 2024
Jordana A.
5min Read

One of the easiest ways to change your WordPress website’s appearance is by changing its theme. However, searching for the right theme can take a long time, so changing it frequently to freshen up your site isn’t the most efficient solution.

This is where WordPress Dashicons can come in handy. Dashicons are the official WordPress font icons available from version 3.8. They’re scalable, lightweight, and customizable using CSS. For this reason, you can use Dashicons without affecting your site’s page load speed.

Keep reading as we will show you how to enable and use Dashicons’ font icon set in your WordPress website space.

👉 Start your website with Hostinger – get fast, secure hosting here 👈