WordPress Dashicons and Bootstrap Icons Use As WordPress Icons
WordPress Icons are very helpful to improve the user experience and look of the WordPress website. There are free resources like WordPress Dashicons and Bootstrap icons to use on WordPress websites.
Dashicons and bootstrap icons are ideal for interface elements due to their simplicity and cleanliness. The two-dimensional views and one-color (monochromatic) appearance make them easy and quick to understand.
In this article, we will explain how to access SVG icons and use them on our WordPress website.
Why Use Bootstrap Icons or WordPress Dashicons?
By improving the visual appeal of the website, icons help to engage visitors. The website attracts more visitors who spend more time on it.
Icons are used to emphasize specific information that needs to be highlighted and make finding it easier.
The consistency of elements and sections can be enhanced by having unique icons in a theme or on our website.
The visual language used by icons is recognized by users and they consistently convey a message. The user interface, various actions, elements, and features in WordPress are effectively represented by them.
The use of WordPress icons aids in creating a link between information and images in the user’s mind, allowing them to recognize specific sections or elements and their names, which aids in easy navigation.
The user experience is enhanced by all these things, resulting in improved SEO.
What are WordPress Dashicons?
WordPress Dashicons are high-quality SVG icons. SVG files are two-dimensional scalable vector graphics that are saved in XML format.
WordPress started to include Dashicons as a native feature since version 3.8, and the number of these SVG icons is 300.
Dashicons are scalable, mean their size can be increased or decreased without losing quality. They support lossless compressions, interactivity, and animation.
Advanced effects and animations can be added to SVGs with the use of CSS or JavaScript.
These are very suitable for a website because of their small size and high resolution. These do not affect website speed as they are lightweight.
In fact, Dashicons are included in Dashboard menu items, but you can also use them on your website’s front-end pages for themes, Gutenberg block editors, and plugins.
In this article, we will explain how to use Dashicon easily on the WordPress website front end.
How to Use Dashicons in WordPress
By default, Dashicons are included in WordPress admin but these are not enabled on the front end and can not used in the themes. To use Dashicons in WordPress, first, you need to enable Dashicons for the current theme that you are using. The second step is to use the theme in your theme.
In this article, we will help you do this in easy steps.
Enabling Dashicon in the WordPress theme
To enable Dashicons in WordPress, you have to add some code to the functions.php file of your theme.
To enable WordPress Dashicons follow the steps below.
By default, Dashicons are enabled in admin, but you have to enable it in the front end.
1 Go to the left side pan in the WordPress dashboard, and click Appearance.
2 Click the Theme File Editor.
3 Now you will see the Edit Themes screen. Now search for the functions.php file in the right pan of the Edit Themes screen. Click functions.php to edit the file.
4 Add the following code snippet at the bottom of your functions.php file as shown in the picture.
5 Now click the button Update the File to save the code you have added, otherwise all changes will be lost.
Now Dashicons are enabled in your current theme and you can use them anywhere on your website.
How to Add Dashicons to your WordPress website.
After enabling Dashicons you can use Dashicons on your website, but you need the code of a specific icon and to insert that code in your WordPress website.
Getting Dashicons Code for specific icons.
The second step is to get HTML or CSS code to paste to show these icons. For that, go to wordpress.org and get the code.
Visit the link https://developer.wordpress.org/resource/dashicons/ to get the code of WordPress Dahicons.
1 Search the Dashicons in this search box. Or you can find the icon just by browsing the icon collection. For example, we searched for an archive icon to use on the website.
2 You can see a collection of arrow icons has appeared, click the icon you need. We selected the archive.
3 Select copy CSS or copy HTML to get the code of the icon. We selected copy HTML.
4 Copy the HTML code to use on your website.
5 Just click OK, to close the pop-up.
You can repeat the process to get more code for more icons.
Now we have gotten the code next step is to use this on our website.
Add The Dashicons Code to Display The Icons
Now we will add icons to archive list title in the WordPress sidebar.
Follow the steps below.
1 Go to the left side pan in the WordPress dashboard, and click Appearance.
2 Click the Widgets.
3 We have to add an icon to the Archive title. Click the Archives.
4 Now click three vertical dots.
5 Select the Edit as HTML.
6 Add the code we have gotten from wordpress.org for the archive icon. Insert the code between the h2 tag.
Note: We can add the icon code, in the page, posts, and block, where we want to appear the icon.
7 Now click Edit visually, to return to the visual editor.
8 To save inserted code and other changes click Update.
9 You can see that the Archive icon appeared on the front page in front of the Archive post title.
Customize Dashicon Using CSS
We can customize Dashicons according to our design needs. We can change the size, color, margins, and padding, and add borders to our Dashicons using CSS. Here you will learn how to add custom CSS code to customize Dashicons.
Follow the steps to customize the Archive icon added in the last section.
1 Go to the left side pan in the WordPress dashboard, and click Appearance.
2 Click the Customize.
3 Select Additional CSS.
4 Add the following code in the box as shown in the picture.
5 Click the Publish button to save the code.
6 You can see that the Dashicons size and color have been changed. Color change from black to white. We have added a 20px margin on the right side. You can that space has been added between the icon and the title
How to Add Bootstrap Icons to your WordPress website.
Bootstrap is an open-source and free-to-use icon library.
There are only 300 icons available in Dashicons. Bootstrap allows for more versatility due to its library of over 2000 high-quality icons.
To use the bootstrap icon you need the code of an icon and to insert that code into your WordPress website.
Getting Bootstrap Icons Code.
We can get HTML or CSS code to use on the website for Bootstrap Icons. Here we will use HTML code.
Visit the Bootstrap Icons website to get the code of bootstrap icons.
1 Search the icon in the search box. Or you can find the icon just by browsing the icon collection. For example, we searched for the Chevron d (Chevron double) icon to use on the website.
2 You can see a collection of Chevron double icons has appeared, click the icon you need. We selected the Chevron-double-right.
3 Click copy to get the HTML code of the icon.
You can repeat the process to get more code for more Bootstrap Icons.
Now we have copied the code next step is to use this on our website.
Add The Bootstrap Icons Code to Display The Icons
Now we will add Chevron double icons to list titles in the WordPress sidebar.
Follow the steps below.
1 Go to the left side pan in the WordPress dashboard, and click Appearance.
2 Click the Widgets.
3 We have to add an icon to the Archive title. Click the Archives.
4 Now click three vertical dots.
5 Select the Edit as HTML.
6 Add the code we have copied from Bootstrap for the Chevron double. Insert the code between the h2 tag.
Note: We can add the Bootstrap Icons code, in the page, posts, and block, where we want to appear the icon.
7 Now click Edit visually, to return to the visual editor.
8 To save inserted code and other changes click Update.
9 You can see that the Chevron double icon appeared on the front page in front of the Archive post title.
Conclusion
WordPress icons play a crucial role in a website. The absence of icons can make a website appear uninteresting and like a plain text document. In addition to their visual appeal, icons can enhance click-through rates (CTR).
In this article, we talked about Dashicons and Bootstrap icons, which are both free resources that we can use on our website.
We have clarified the process of accessing and displaying WordPress Icons on the WordPress website.
We hope this article will help you use icons on your website.