{"id":74047,"date":"2022-12-23T05:45:33","date_gmt":"2022-12-23T05:45:33","guid":{"rendered":"\/tutorials\/?p=74047"},"modified":"2024-03-26T15:00:06","modified_gmt":"2024-03-26T15:00:06","slug":"wordpress-dashicons","status":"publish","type":"post","link":"\/tutorials\/wordpress-dashicons\/","title":{"rendered":"How to use and display WordPress dashicons to make your theme stand out"},"content":{"rendered":"

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.<\/p>

This is where WordPress Dashicons can come in handy.<\/p>

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.<\/p>

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

\n\n\n\n\n\n\n\n

\n \n \n <\/svg>\n

\n What Is WordPress Dashicons?\n <\/p>\n <\/div>\n

WordPress Dashicons is a set of font icons included in WordPress core since version 3.8. Over 300 font icons in the SVG format are ready to use without loading a third-party icon library. What’s more, these font icons are scalable and lightweight ‒ perfect for spicing up your website’s design without hurting its page speed.<\/p><\/div>\n\n\n\n<\/p>

How to Use and Display Dashicons in WordPress<\/h2>

The Dashicons library is available in your WordPress admin dashboard by default. However, you must enable Dashicons manually if you want to add icons to your theme.<\/p>

In the following sections, we’ll show you how to use the Dashicons library in WordPress.<\/p>

Enabling Dashicons on WordPress Site<\/h3>

The first step of enabling Dashicons in WordPress is to edit your theme’s functions.php<\/strong> file.<\/p>

    \n
  1. Navigate to Appearance <\/strong>→ Theme File Editor<\/strong> on your WordPress admin area.<\/li>\n<\/ol>
    \n
    \"Accessing<\/a><\/figure>\n<\/div>
      \n
    1. Open the functions.php<\/strong> file.<\/li>\n<\/ol>
      \n
      \"Editing<\/a><\/figure>\n<\/div>
        \n
      1. Add the following code snippet at the bottom of the Functions <\/strong>file:<\/li>\n<\/ol>
        add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); \nfunction load_dashicons_front_end() { \nwp_enqueue_style( 'dashicons' ); \n}<\/pre>
          \n
        1. Once done, select Update File<\/strong>. You can now use Dashicons on the front end of your WordPress site.<\/li>\n<\/ol>
          \n\n\n        
          \n            
          \n                \n                    \n                <\/svg>\n                
          \n                    Pro Tip                <\/p>\n            <\/div>\n            
          Make sure to add the code to your child theme<\/a> to prevent future theme updates from reverting the changes.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p>
          Finding Dashicon HTML and CSS Codes<\/h3>
          After enabling Dashicons for your site’s front end, you can add icons to posts, pages, or parts of your theme.<\/p>
          Follow the steps below to add Dashicons to the menu items.<\/p>
            \n
          1. Access the Dashicons icon library on the WordPress Developer Resources<\/a>. Click on your chosen icon, hit the Copy HTML<\/strong> link, and copy the Dashicons HTML code from the popup window.<\/li>\n<\/ol>
            \n
            \"Retrieve<\/a><\/figure>\n<\/div>
              \n
            1. Go to Appearance <\/strong>→ Menus <\/strong>from your WordPress dashboard. Click on the menu item to expand the dropdown menu and paste the HTML code into the Navigation Label<\/strong> textbox before the text.<\/li>\n<\/ol>
              \n
              \"Adding<\/a><\/figure>\n<\/div>
                \n
              1. Click Save Menu<\/strong>. Follow these steps for other menu items you want to modify.<\/li>\n<\/ol>
                \n
                \"An<\/a><\/figure>\n<\/div>
                Besides CSS code<\/a>, Dashicons also provide its font icons’ HTML code and Glyph character 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.<\/p>
                For instance, copy the CSS code to add an icon font to the style.css<\/strong> file. You can use a custom CSS editor to modify your CSS file if you don’t like what the Theme File Editor offers.<\/p>
                Here are some different ways to use Dashicons in WordPress:<\/p>