What Are Dashicons and How To Use Them In WordPress
Dashicons are a pre-installed collection of font icons that are an integral part of WordPress. They were initially introduced in WordPress 3.8 during a major overhaul of the backend user interface. By default, Dashicons are utilized for various links found on the left-hand side of the WordPress admin bar. However, they offer the flexibility to be customized to match specific requirements.
These icons are not restricted to WordPress core usage alone. They can also be employed in your own custom plugins and themes. Dashicons can be utilized when defining new post types, creating custom admin panels, or even incorporated into the design of your front-end themes. Despite being primarily designed for core functionality, they can be seamlessly integrated into any custom plugin or theme you develop. The best part is that implementing Dashicons is incredibly straightforward!
By leveraging Dashicons, you can enhance the visual appeal and user experience of your WordPress projects, ensuring a consistent and professional interface throughout.
You can use these icons on:
- WordPress dashboard
- Navigation menus
- Pages and posts
- Metadata
- Editor elements
- Custom plugins and themes
- Admin panels
- Front-end design
What Are Dashicons?
Dashicons are a set of vector icons that are built into WordPress. These icons are specifically designed for use in the WordPress admin area and can be used in themes, plugins, and customizations. The Dashicons library consists of a wide range of icons that cover various functions and elements commonly found in the WordPress ecosystem. With Dashicons, you can easily incorporate visually appealing icons into your WordPress site without the need for additional image files or third-party icon libraries.
Difference between image icons and icon fonts?
Icon fonts and image icons are somewhat similar, but instead of alphabets, vector symbols are there in icon fonts.
Is it possible that I got a little too technical there?
Please allow me to clarify.
On the surface, these icon fonts look like images that you can use to add symbols to your website, but they are not actually images themselves.
They provide a plethora of advantages to you.
What advantages does the usage of Dashicons offer?
- Scalability: Dashicons, being font-based, can be easily scaled without losing quality. Just like regular text on your website, you can adjust the size of Dashicons to fit your design requirements.
- Lightweight: Unlike image-based icons, Dashicons are lightweight as they are implemented as fonts. This means they have no impact on page loading speed, resulting in faster load times for your website.
- Customization: Dashicons can be customized using CSS, allowing you to change the color, apply gradients, add shadows, and apply various other visual properties. This gives you the flexibility to match the icons with your overall design and branding.
- Reduced HTTP Requests: By utilizing Dashicons as fonts, you can load them in bulk and utilize them across multiple pages of your website. This helps reduce the number of HTTP requests required to load individual images, leading to improved performance and faster page load times.
- Easy to Use and Adapt: Working with Dashicons is straightforward. You can easily incorporate recognizable and creative symbols without the need to recreate them every time you require an icon. This makes it convenient to add icons for various purposes such as video players, emails, music, and more on your website.
- WordPress Integration: As Dashicons are integrated into WordPress, they provide greater accessibility. This means that users with assistive technologies can benefit from these icons, improving the overall accessibility and usability of your website.
Overall, Dashicons offer a range of benefits including scalability, lightweight implementation, customization options, reduced HTTP requests, ease of use, and enhanced accessibility, making them a valuable asset for your WordPress projects.
Integrating Dashicons Into Custom Post Types
It is sufficient to set the menu icon argument to the CSS classname of the Dashicon you wish to use when creating a new custom post type in WordPress, and this icon will be defined as the icon that appears next to the name of your custom post type in the WordPress admin panel on the left-hand side of the screen.
Simply go to the Dashicons landing page and click on any icon you want to use. You’ll see the classname at the top of the page next to the icon, which you can copy and paste into your website or application.
// Register a new custom post type named Portfolio register_post_type( 'portfolio', array( 'public' => true, 'menu_icon' => 'dashicons-portfolio', 'label' => __( 'Portfolio', 'local' ), );
Incorporating Dashicons into the theme’s front-end design
There are numerous icons used in front-end themes these days, including post meta icons (date, category, tag, author), as well as header icons such as the user, search, and shopping cart icons (to name a few).
However, while FontAwesome is the most widely used and popular font icon set available, and while it is a great choice for most projects, it is also a very large icon set that includes many icons you will never use; you could use a font generator website such as Fontello to create a stylesheet of only the icons you need, but another option is to useDashicons, which is already included in your WordPress installation.
To make Dashicons appear on the front-end of your website, simply include the following code in your theme’s functions.php file (insert via a child theme if you are customizing an existing theme and not making your own).
add_action( 'wp_enqueue_scripts', function() { wp_enqueue_style( 'dashicons' ); } );You can now insert an icon into an HTML document using the following syntax:
<span class="dashicons dashicons-menu"></span>
Shortcodes for Dashicons: How to Create One
Another option for incorporating Dashicons into your website’s front-end would be to create a shortcode that can be used anywhere on the site. A good example of this would be if you’re creating a website for a client and you want to make it easier for them to insert icons on the site without having to mess around with HTML codes.
Here’s an example of what that code might look like; all you have to do now is paste it into your functions.php file (or other non-template file being loaded by functions.php)
add_shortcode( 'dashicon', function( $atts ) { $atts = shortcode_atts( array( 'icon' => 'menu', ), $atts, 'bartag' ); if ( ! empty( $atts[ 'icon' ] ) ) { return '<span class="dashicons dashicons-' . esc_attr( $atts[ 'icon' ] ) . '"></span>'; } } );Shortcode usage:
[dashicon icon="chart-pie"]
Dashicon Icons
Currently there are more than 300+ icons in WordPress. Below I have attached screenshot of Dashicons available.
What is the best way to use Dashicons?
The majority of dashicon icons are used on the back end by wordpress themes, so if you are creating custom post types and want to include dashicon icons, that is something you can do.
Making use of Dashicons in the frontend
If you intend to use Dashicons on the frontend, it’s important to note that they are primarily designed for backend usage in WordPress. However, there is no technical restriction preventing you from enqueueing and utilizing Dashicons on the frontend if you wish to do so.
It’s worth mentioning that Dashicons has a smaller icon library compared to other font icon libraries like Font Awesome. While Dashicons provide icons for buttons, post formats, taxonomies, media types, and more within the TinyMCE editor, some users may find them less visually appealing compared to alternatives available in Font Awesome.
However, if you have a limited need for icons and the icons you require are available in Dashicons, you are free to use them on the frontend of your WordPress site.
The Dashicons library provides the necessary HTML and CSS code for each icon. You can find these resources on the WordPress.org website under the Developer Resources section.
Please note that while Dashicons can be utilized on the frontend, it’s important to consider the visual aesthetics and the availability of alternative icon libraries to ensure the best design and user experience for your website.
Display Dashicons directly in posts and pages
If you want to add icons to post or page this is easy. To do this just add this code in the text editor:
<h2 class="dashicons-before dashicons-smiley">A Cheerful Headline</h2>
Or alternatively, you can use this code:
<h2><span class="dashicons dashicons-smiley"></span> A Cheerful Headline</h2>
Then once you save your post and reload the page you should see the smiley icon.
How to Create a Shortcode
To make Dashicons easier to use for your clients you can make shortcode for Dashicons. To do this simply add this code to function.php file:
add_shortcode( 'dashicon', function( $atts ) {
$atts = shortcode_atts( array(
'icon' => 'menu',
), $atts, 'bartag' );
if ( ! empty( $atts[ 'icon' ] ) ) {
return '<span class="dashicons dashicons-' . esc_attr( $atts[ 'icon' ] ) . '"></span>';
}
} );
Make use of the Dashicon HTML and make modifications with CSS.
There is a fairly straightforward method of incorporating Dashicons into your website without having to write any PHP code. A little HTML and CSS can accomplish the same thing just as easily!
The steps are as follows:
- Navigate to the Dashicon website.
- Choose the icon that you want to use.
- Select the option to “Copy HTML,” and then copy the code for the Icon that appears.
- Copy and paste the code into a Text Editor or Text Widget of your choice to make it work.
- Custom CSS can be used to change the appearance of your icon.
Using FireBug in Firefox or the Inspect Element option in Google Chrome will assist you in locating the CSS element that will allow you to manipulate the CSS code while the icons are displayed by default at 20 pixels.
If you want to incorporate Dashicons into your WordPress site’s admin menu to link visitors to your Facebook and Twitter pages, follow these guidelines:
Step 1: Visit the Dashicons page at http://melchoyce.github.io/dashicons/. This page displays all the available Dashicons that can be used with WordPress.
Step 2: Choose the Dashicon you wish to use in the admin dashboard. Click on the icon, and you will see an enlarged view of it along with links to copy the CSS, HTML, and glyph.
Step 3: Click on the “Copy HTML” link. This will copy the HTML code associated with the selected Dashicon. Paste this code into your HTML.
For example, if you want to display social media Dashicons (such as Facebook and Twitter) in the sidebar of your WordPress site, you can add a text widget to the main sidebar area. In the text field of the text widget, paste the HTML code in the following manner:
<a style=”text-decoration:none;” href=”http://twitter.com/YourTwitterId”><div class=”dashicons dashicons-twitter”></div></a> <a style=”text-decoration:none;” href=”http://www.facebook.com/YourFacebookProfile”><div class=”dashicons dashicons-facebook-alt”></div></a>
You can also customize the size of these icons by adjusting their font size in the CSS. Additionally, you have the flexibility to assign different colors to the icons.
I hope you find this tutorial helpful in using Dashicons within your theme or plugin menu. If you have any questions or suggestions regarding this topic, please feel free to share them with us.
F.A.Q
Can I Customize the Color or Size of Dashicons?
Dashicons are designed to be used in their default form and color. However, you can customize their size using CSS, such as font-size, to make them larger or smaller. As for color, since Dashicons are typically monochromatic, you can change their color by manipulating the CSS color property.
4. Are Dashicons Responsive?
Yes, Dashicons are responsive by default. They are vector-based icons, which means they can be scaled without loss of quality. When you resize your website or view it on different devices, Dashicons will adjust accordingly and maintain their crisp appearance.
5. Can I Add Custom Dashicons?
At present, you cannot directly add custom Dashicons to the WordPress Dashicons library. However, you can create your own custom icons and use them as image icons or incorporate them into your theme or plugin using CSS or inline SVG.
6. Are Dashicons Compatible with Page Builders and Customizer Plugins?
Yes, Dashicons are compatible with most page builders and customizer plugins. Since Dashicons are a built-in part of WordPress, they can be accessed and used within the content and customization options provided by these plugins.
Remember that Dashicons are primarily designed for use in the WordPress admin area, so they may not always be available or compatible with front-end page builders that have their own set of icons.
Summary
In conclusion, Dashicons are a versatile resource for enhancing the visual appeal and user experience of your WordPress website. By incorporating these icons using CSS classes, helper functions, or within menus and custom post types, you can easily add intuitive and visually engaging elements to your WordPress site.
