{"id":30110,"date":"2021-09-25T17:00:25","date_gmt":"2021-09-25T15:00:25","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=30110"},"modified":"2021-09-23T09:31:48","modified_gmt":"2021-09-23T07:31:48","slug":"how-to-use-wordpress-dashicons","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-use-wordpress-dashicons\/","title":{"rendered":"How to Use Dashicons in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]From the WordPress 3.8 update, which was a long time ago now, Dashicons have been an icon pack that was included in WordPress by default. They can be seen in various links within the dashboard\u2019s sidebar menu\u2014both those which are a part of WordPress and those enabled by plugin and theme authors. The icons make the sidebar links more noticeable and easily recognizable.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]While they are perfect for the WordPress backend area, Dashicons can also be used on the website\u2019s frontend. You can add them to help highlight a specific text, button, menu item, section, or something else entirely. Since their use spans across a whole WordPress website, we created this comprehensive article covering different applications of Dashicons that all WordPress users can benefit from. During the course of it, we\u2019ll cover the following topics:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#the-prerequisites-for-starting\">The prerequisites for starting<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-add-dashicons-to-the-frontend\">How to add Dashicons to the frontend<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-add-dashicons-to-the-backend\">How to add Dashicons to the backend<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">How to use Dashicons in WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]Since Dashicons can be used for a variety of reasons, we sorted the applications we\u2019ll be covering into two separate sections. They are sorted based on where the Dashicons are used and the amount of code needed to implement them. We took care to elaborate on each section and provide thorough instructions. However, as some of the methods for using Dashicons are more developer-friendly, you shouldn\u2019t hesitate to do research on the side.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"the-prerequisites-for-starting\"><\/a>The prerequisites for starting<\/h3>\n<p>[\/vc_column_text][vc_column_text]Before going into the details on how to add a Dashicons icon to your WordPress website, there are a couple of things that need to be done first. Some of them are directly tied to how Dashicons are used, while others are common precautions you should take when adding code to a WordPress website. As such, we list them below and we advise everyone to carefully review this section before proceeding to the main part of the article.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Firstly, all PHP code snippets that we mention in this article should be added <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-use-ftp\/\">via FTP<\/a> inside one of two places\u2014the functions.php file of your child theme or a <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-site-specific-plugin\/\">site-specific plugin<\/a>. Additionally, we suggest <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-manually-backup-wordpress-website\/\">making a backup of your website<\/a> before adding any code. This will ensure that no harm is done to your website should something go wrong.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Apart from that, there are two additional things that you need to do. They are specific to the process of adding Dashicons to a WordPress website, so we urge you to study them carefully.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>The prerequisite for adding Dashicons in the frontend<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]While Dashicons are enabled by default within the admin dashboard, this is not the case for the frontend of your website. If you plan on using them on the frontend, you will need to enable them for the frontend first. To do that, you can use the following code snippet:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_use_dashicons_on_front_end() {\r\nwp_enqueue_style( 'dashicons' );\r\n}\r\nadd_action( 'wp_enqueue_scripts', 'qode_use_dashicons_on_front_end' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To clarify, this snippet simply <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-enqueue-scripts-wordpress\/\">enqueues the Dashicons stylesheet<\/a> by placing it in a separate function called <strong>qode_use_dashicons_on_front_end()<\/strong>. It then hooks that function onto the <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/wp_enqueue_scripts\/\" target=\"_blank\" rel=\"noopener\">wp_enqueue_scripts<\/a> action hook. This is the proper hook for enqueueing both scripts and stylesheets that are used on the frontend of a WordPress website.[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Finding the icon name and HTML code<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The final requirement for adding Dashicons to your site\u2019s frontend is knowing how to find the icons belonging to the Dashicons icon pack, as well as retrieve the relevant data for each icon. That data is the name of the icon and the HTML code behind it. Depending on whether you wish to add the icon to the website\u2019s backend or frontend, you will need to know the name or the latter. We will show you how to retrieve these two pieces of information for each icon.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To find all the icons belonging to the Dashicons icon pack, <strong>navigate to the <a href=\"https:\/\/developer.wordpress.org\/resource\/dashicons\/#menu\" target=\"_blank\" rel=\"noopener\">Dashicons page<\/a><\/strong> first. After accessing the page, you will see that the menu icon is displayed by default, as it is the first icon in the list. You will also see a wide range of icons that are sorted into several different categories. <strong>Browse through all the icons <\/strong>and<strong>, after choosing the one you wish to add to your website, click on it<\/strong> to select it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"637\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Dashicons-page.jpg\" class=\"attachment-full size-full\" alt=\"Dashicons page\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Dashicons-page.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Dashicons-page-300x197.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Dashicons-page-768x505.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Dashicons-page-620x408.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The URL of the page will change to match the name of the selected icon and that icon will be displayed at the top of your screen. This is where you\u2019ll be able to copy the icon code and see the full icon name.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There are three ways to get the code that will let you include an icon on your website\u2014by copying the CSS, HTML, or Glyph. For this article, we decided to use the dashboard icon as an example. And we opted for the <em>Copy HTML<\/em> option of the three that are provided.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Therefore, <strong>click on the <em>Copy HTML<\/em> link<\/strong> associated with the icon you selected.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Admin-Menu-Copy-HTML.jpg\" class=\"attachment-full size-full\" alt=\"Admin Menu Copy HTML\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Admin-Menu-Copy-HTML.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Admin-Menu-Copy-HTML-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Admin-Menu-Copy-HTML-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Admin-Menu-Copy-HTML-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you\u2019ve done that, a popup message screen will appear showing the HTML code you need to use to display your icon. <strong>Copy the HTML code you get<\/strong> and then <strong>press the <em>Ok<\/em> button<\/strong> to close the message screen.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Copy-Code.jpg\" class=\"attachment-full size-full\" alt=\"Copy Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Copy-Code.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Copy-Code-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Copy-Code-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Copy-Code-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>After copying the HTML code, you can paste it into any part of your WordPress website that accepts HTML code and displays it on the frontend.<\/strong> Those parts include your navigation menus, the content of your pages and posts, and widgets that use shortcodes or accept HTML code.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And if you\u2019re interested in displaying the icon on the backend of your website, you will need to use the icon\u2019s name, which you can see above the HTML code we copied. But we\u2019ll be talking about this in more detail in the <a href=\"#how-to-add-dashicons-to-the-backend\">section on adding Dashicond to the backend<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"how-to-add-dashicons-to-the-frontend\"><\/a>How to add Dashicons to the frontend<\/h3>\n<p>[\/vc_column_text][vc_column_text]In this section, we\u2019ll show you how to add a Dashicons icon to your website\u2019s frontend by directly pasting the HTML code necessary for the icon to be created. Before you dive in, don\u2019t forget to visit the previous section and find out how to obtain the HTML code for the icon you wish to add to your WordPress website. Once you\u2019ve done that, proceed as described below.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Adding Dashicons to WordPress navigation menus<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To add the HTML code of your Dashicons icon to a WordPress navigation menu, <strong>navigate to the Appearance &gt; Menus section<\/strong> within your admin dashboard. Then, <strong>select the menu you wish to edit<\/strong> and <strong>click on a menu item<\/strong> where you want to add the icon.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next, <strong>look for the Navigation Label option<\/strong> within the expanded menu item area. <strong>You will need to paste the HTML code directly inside that area.<\/strong> Depending on whether you want the icon to appear before or after the menu item when displayed on the website, you should paste the code before or after the existing menu item label.<strong> After adding the HTML code, press the <em>Save Menu<\/em> button to save the changes you\u2019ve made.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"570\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Edit-Menus.jpg\" class=\"attachment-full size-full\" alt=\"Edit Menus\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Edit-Menus.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Edit-Menus-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Edit-Menus-768x452.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Edit-Menus-620x365.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"570\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Save-Menu.jpg\" class=\"attachment-full size-full\" alt=\"Save Menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Save-Menu.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Save-Menu-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Save-Menu-768x452.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Save-Menu-620x365.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, <strong>examine the frontend of your website<\/strong> to see how your chosen icon looks.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Dashicon-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Dashicon Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Dashicon-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Dashicon-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Dashicon-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Dashicon-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Adding Dashicons to WordPress pages and posts<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To add a Dashicons icon to the content of a WordPress page or post you should first <strong>copy the HTML code of the icon you wish to add<\/strong> as explained in <a href=\"#the-prerequisites-for-starting\">the prerequisites section<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Pages-and-Posts-Copy-HTML.jpg\" class=\"attachment-full size-full\" alt=\"Pages and Posts Copy HTML\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Pages-and-Posts-Copy-HTML.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Pages-and-Posts-Copy-HTML-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Pages-and-Posts-Copy-HTML-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Pages-and-Posts-Copy-HTML-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Then, you will need to place the HTML code inside an HTML rendering shortcode. For most page builders, that is the Custom HTML shortcode, or the Custom HTML block if you are using the Gutenberg editor. Please note, for Classic Editor users, this means pasting HTML code inside the editor\u2019s Text tab.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>If you want to add a Dashicons icon to a widget area, you can insert the same HTML code inside a Custom HTML widget.<\/strong> The principle is the same as the one you\u2019d use to add the code to the Custom HTML block.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With that being said, to add the icon, <strong>open a page or post<\/strong> and <strong>add a Custom HTML block<\/strong> to it. You can directly paste the code you copied into the block or wrap it with additional HTML code. We\u2019ve done both for this article, and you can see how it turned out below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"609\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Add-HTML.jpg\" class=\"attachment-full size-full\" alt=\"Add HTML\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Add-HTML.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Add-HTML-300x189.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Add-HTML-768x483.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Add-HTML-620x390.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After adding the HTML code, <strong>update the page\/post<\/strong> and<strong> examine it from the frontend<\/strong>, to see the result.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"557\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Frontend-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Frontend Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Frontend-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Frontend-Preview-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Frontend-Preview-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Frontend-Preview-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"how-to-add-dashicons-to-the-backend\"><\/a>How to add Dashicons to the backend<\/h3>\n<p>[\/vc_column_text][vc_column_text]Dashicons can also be used in the WordPress backend as icons next to custom sections created within the admin dashboard\u2019s sidebar menu. These sections are referred to as menu pages. They can be created for custom post types or new sets of options by plugin and theme developers for implementing new functionalities. In that case, adding custom icons next to those menu sections helps users spot them easily and recognize them more quickly in the future.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this section, we will explain how you can add Dashicons specifically to custom sections. We will also show you how to create a custom Dashicons shortcode if you aren\u2019t satisfied with just adding the plain HTML code we previously mentioned. Let\u2019s begin![\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Adding a Dashicons menu icon to the admin dashboard menu<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To add a custom post type to your WordPress website, you will need to register it first using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_post_type\/\" target=\"_blank\" rel=\"noopener\">register_post_type()<\/a> function. Among the many parameters this function accepts, is the <strong>menu_icon<\/strong> parameter. It allows you to specify which icon is displayed next to the custom post type menu section within the admin dashboard. This has also made Dashicons one of the most popular choices for plugin and theme authors.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To use Dashicons, you must <strong>set the menu_icon parameter to the full name of the icon when the register_post_type() function is called<\/strong> (e.g. dashicons-format-video).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To illustrate this, we leave you with a simple example of how you can register a custom post type called <em>movie<\/em> with a corresponding menu section that has the <strong>dashicons-format-video<\/strong> icon next to it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_register_movie_cpt() {\r\nregister_post_type( 'movie',\r\narray(\r\n'labels' =&gt; array(\r\n'name' =&gt; esc_html__( 'Movies', 'your-translate-domain' ),\r\n'singular_name' =&gt; esc_html__( 'Movie', 'your-translate-domain' ),\r\n'add_item' =&gt; esc_html__( 'New Movie', 'your-translate-domain' ),\r\n'add_new_item' =&gt; esc_html__( 'Add New Movie', 'your-translate-domain' ),\r\n'edit_item' =&gt; esc_html__( 'Edit Movie', 'your-translate-domain' )\r\n),\r\n'public' =&gt; true,\r\n'menu_position' =&gt; 5,\r\n'menu_icon' =&gt; 'dashicons-format-video'\r\n)\r\n);\r\n}\r\nadd_action( 'init', 'qode_register_movie_cpt' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With this small code snippet, we registered the movie post type using the <strong>qode_register_movie_cpt()<\/strong> function which is hooked to the <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/init\/\" target=\"_blank\" rel=\"noopener\">init<\/a> action hook. Within the function, we specified some of the labels for the new section, including its name\u2014Movies. We also made the post type publicly viewable and placed it directly below the Posts section, so it\u2019s near the top of the admin dashboard left-side menu.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Most importantly, we specified that the icon that the Movies section has is the <strong>dashicons-format-video<\/strong>. If we hadn\u2019t specified the exact icon, the default <strong>dashicons-admin-post<\/strong> icon would have been used. This is the same icon that is used for the Posts section, so keeping it might have proven visually confusing to some WordPress users.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can see how the code we used turned out.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Dashboard-Movies.jpg\" class=\"attachment-full size-full\" alt=\"Dashboard Movies\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Dashboard-Movies.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Dashboard-Movies-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Dashboard-Movies-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Dashboard-Movies-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]With that being said, creating a custom post type is a separate, advanced WordPress topic. We covered it in detail in our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-make-wordpress-custom-post-types\/\">creating custom post types<\/a>, and you can check it out for a full overview of the process.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Besides what we described above, there is another way of adding a new section (i.e. menu page) within the dashboard sidebar menu. This is done using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_menu_page\/\" target=\"_blank\" rel=\"noopener\">add_menu_page()<\/a> function. Similar to the previous function, it is mostly used by plugin and theme developers to implement their custom options.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Like the previous function, the add_menu_page() accepts the <strong>$icon_url<\/strong> parameter among others. However, apart from the URL to a specific base64-encoded SVG file, you can also insert the Dashicons helper class name. This is what we meant when we referred to a Dashicons icon\u2019s name earlier (e.g.<strong> dashicons-media-code<\/strong>).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can see a simple coding snippet below, illustrating this use of Dashicons.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_register_a_custom_menu_page() {\r\nadd_menu_page(\r\nesc_html__( 'Custom Options', 'textdomain' ), \/\/ Browser tab title\r\nesc_html__( 'Custom Options', 'textdomain' ), \/\/ Admin sidebar menu title\r\n'administrator',\r\n'custom-options-page',\r\n'qode_custom_options_page_HTML',\r\n'dashicons-media-code',\r\n100\r\n);\r\n}\r\nadd_action( 'admin_menu', 'qode_register_a_custom_menu_page' );\r\nfunction qode_custom_options_page_HTML() {\r\nesc_html_e( 'Option code goes here...', 'textdomain' );\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This code represents two functions\u2014<strong>qode_register_a_custom_menu_page()<\/strong> and <strong>qode_custom_options_page_HTML()<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The former is hooked to the <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/admin_menu\/\" target=\"_blank\" rel=\"noopener\">admin_menu<\/a> action hook and it is responsible for the creation of the new menu page<\/strong> as it contains the use of the <strong>add_menu_page()<\/strong> function. As for the parameters we used, <strong>we made it so that the title displayed in the browser tab and the sidebar menu is set to Custom Options. We also made the section available only to users with administrator capabilities<\/strong>, i.e. those with the administrator user role.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The latter is used to create the content of this section and set the menu icon to dashicons-media-code.<\/strong> Since this is a simple snippet used as an example, we made it so that<strong> the qode_custom_options_page_HTML() function displays the text <em>Option code goes here\u2026<\/em> as a placeholder.<\/strong> Otherwise, the options that would need to be coded would be placed there. The snippet\u2019s output is shown below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"557\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Dashboard-Custom-Options.jpg\" class=\"attachment-full size-full\" alt=\"Dashboard Custom Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Dashboard-Custom-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Dashboard-Custom-Options-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Dashboard-Custom-Options-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Dashboard-Custom-Options-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Using a custom created Dashicons shortcode<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As a last possible use of Dashicons, we will take a look at custom shortcodes. Premium themes or plugins might offer icon shortcodes that they\u2019ve created and which you can use with ease. This is the case with the <a href=\"https:\/\/qodeinteractive.com\/themes-list\/\" target=\"_blank\" rel=\"noopener\">themes in the Qode Interactive<\/a> catalog.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, if you prefer or your theme\/plugins don\u2019t include a custom icon shortcode, you can create your own. All you need is a bit of coding knowledge and a place to start. While the former is up to you, we can help with the latter. So, for this article, we created a simple Dashicons custom shortcode as an example.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_custom_dashicon_shortcode( $atts ) {\r\n$default_atts = array(\r\n'icon_name' =&gt; 'menu',\r\n'icon_color' =&gt; '',\r\n'margin' =&gt; '',\r\n'custom_class' =&gt; ''\r\n);\r\n$params = shortcode_atts( $default_atts, $atts );\r\n$icon_styles = '';\r\n$icon_classes = 'custom-icon dashicons';\r\n\/\/ Creating the icon styles\r\nif ( ! empty( $params['icon_color'] ) ) {\r\n$icon_styles .= 'color: ' . $params['icon_color'] . '; ';\r\n}\r\nif ( ! empty( $params['margin'] ) ) {\r\n$icon_styles .= 'margin: ' . $params['margin'] . '; ';\r\n}\r\n\/\/ Adding the icon classes\r\nif ( ! empty( $params['icon_name'] ) ) {\r\n$icon_classes .= ' dashicons-' . $params['icon_name'];\r\n}\r\nif ( ! empty( $params['custom_class'] ) ) {\r\n$icon_classes .= ' ' . $params['custom_class'];\r\n}\r\nreturn '&lt;span class=\"' . esc_attr( $icon_classes ) . '\" style=\"' . esc_attr( $icon_styles ) . '\"&gt;&lt;\/span&gt;';\r\n}\r\nadd_shortcode( 'custom_dashicon', 'qode_custom_dashicon_shortcode' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let\u2019s briefly explore this code.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To start with, it represents a function called <strong>qode_custom_dashicon_shortcode()<\/strong> which is added as a <strong>custom_dashicon<\/strong> shortcode using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_shortcode\/\" target=\"_blank\" rel=\"noopener\">add_shortcode()<\/a> function. The main part contains the code that creates and renders the icon.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The icon accepts four parameters\u2014a shortened name for it, and the color, margin, and custom class you wish to add to it.<\/strong> The shortened name of the icon is the part of the label that comes after <strong>dashicons<\/strong>&#8211; since we added the first part already within our custom shortcode. For example, <strong>if a full Dashicons icon name is dashicons-index-card, the shortened name used for this shortcode would be index-card.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Index-Card.jpg\" class=\"attachment-full size-full\" alt=\"Index Card\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Index-Card.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Index-Card-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Index-Card-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Index-Card-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>The output of this shortcode is the same as the HTML code<\/strong> that can be copied from the Dashicons page, <strong>but with a bit of additional CSS code<\/strong>. This CSS was created <strong>using the remaining parameters that can further stylize the icon\u2014icon color, margin, and custom class.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now that you know what the shortcode does, let\u2019s explain how to use it. In general, any custom shortcode can be used by placing its shortcode call inside a shortcode-rendering element. The particular element you use can vary depending on your preferred page editor.<strong> In Gutenberg, you\u2019d use the Shortcode block. For Classic Editor users, you can add the shortcode call directly inside the Visual tab of your editor. WP Bakery users can put the shortcode call inside the Visual tab of the Text Block element, while Elementor users can place it within the Visual tab of the Text Editor element.<\/strong> If you\u2019d like to see this explained in more detail, you can check out <a href=\"https:\/\/qodeinteractive.com\/magazine\/create-shortcode-in-wordpress\/\">our article on custom shortcodes<\/a>, and the section on <a href=\"https:\/\/qodeinteractive.com\/magazine\/create-shortcode-in-wordpress\/#using-custom-shortcodes\">using custom shortcodes<\/a> in particular.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we will stick to using the Gutenberg editor only. Therefore, to use this shortcode on one of your pages or posts, <strong>add the Shortcode block to it<\/strong> and<strong> place the shortcode call within the block<\/strong>. Then, <strong>update the page\/post by pressing on the <em>Update<\/em> button<\/strong> in the top-right corner of the screen.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The shortcode call consists of the shortcode name\u2014custom_dashicon\u2014followed by a list of parameters it accepts. Each parameter gets its respective value, displayed in the parameter=&#8217;value&#8217; manner.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[custom_dashicon icon_name='index-card' icon_color='#007FFF' margin='20px 30px' custom_class='qode-dashicon']<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Shortcode.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Shortcode-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After adding your shortcode call, review the page to observe the shortcode\u2019s output. You can see the result we got in the screenshot below.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Final-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Final Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Final-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Final-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Final-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Final-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]In this article, we discussed the various ways of including Dashicons in the content of your WordPress website. Whether you\u2019d like to add them to your site\u2019s frontend or backend, there are several options to choose from. These range from pasting the icon\u2019s HTML code inside an appropriate navigation menu item, HTML-rendering shortcode or widget to adding custom functionalities that contain the icon, such as custom shortcodes, custom post types, or custom options pages.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]While you can try to find WordPress plugins or themes that will let you add Dashicons and custom functionalities, you can use these instructions and add them, fully customized, on your own. With the information we covered, you will easily be able to do it yourself simply following the steps we described. And, since we covered a lot of important WordPress concepts within this article, reading through it should benefit a wide range of WordPress users, especially those interested in growing their knowledge.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>With a massive collection of icons at your disposal, WordPress Dashicons can help you customize both your site&#8217;s frontend and backend.<\/p>\n","protected":false},"author":11229,"featured_media":30185,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[14,135,4,13],"class_list":["post-30110","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-core","tag-customization","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/30110","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=30110"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/30110\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/30185"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=30110"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=30110"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=30110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}