{"id":10246,"date":"2022-04-19T13:06:56","date_gmt":"2022-04-19T13:06:56","guid":{"rendered":"https:\/\/colibriwp.com\/blog\/?p=10246"},"modified":"2022-05-12T11:56:27","modified_gmt":"2022-05-12T11:56:27","slug":"wordpress-icons-how-to-make-the-most-out-of-them","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/wordpress-icons-how-to-make-the-most-out-of-them\/","title":{"rendered":"WordPress Icons: How to Make The Most Out Of Them"},"content":{"rendered":"

 <\/p>\n

WordPress icons can make a website more catchy and can help you substitute plain old list bullets with something more visually appealing. <\/span>Also, they allow you to visualize certain concepts quickly and easily while avoiding photos or complex illustrations.<\/span><\/p>\n

Icons are recognized as patterns that most users are familiar with. For example, if you notice a microphone icon somewhere on the web or in a phone app, you can intuitively say it refers to voice command or recording functionality, right?<\/span><\/p>\n

Lots of icons have become universal symbols, and, in some instances, they can replace text entirely. For example, the four colored stars below can replace the following text \u201c4 out of 5 clients that bought this HP DeskJet are recommending it\u201d.\u00a0<\/span><\/p>\n

\"\"<\/p>\n

Why Use WordPress Icons?<\/span><\/h2>\n

Let’s start with the basics. Icons are at their core\u2026fonts. Surprised much?\u00a0<\/span>You can change their size and color, as you would with any other font.\u00a0<\/span><\/p>\n

Icons are typefaces that use symbols and pictograms rather than letters and numbers. Think of them as little pictures that people regularly click on them.\u00a0<\/span><\/p>\n

Here\u2019s what I mean:\u00a0<\/span><\/p>\n

\"wordpress<\/p>\n

Probably the icons that you\u2019re most familiar with are the <\/span>social media icons<\/span><\/a>: Facebook, Youtube, and others, right?\u00a0<\/span>Some of you might have thought that icons are images.\u00a0<\/span><\/p>\n

So, you might wonder, why not images if the two are so similar? <\/span><\/p>\n

Unfortunately, images are not scalable and unresponsive; therefore, they can slow down page loading time and make it inaccessible to some audiences. As a result, icon fonts emerged as an alternative that works on any screen and weighs much less.\u00a0<\/span><\/p>\n

Icon fonts, on the other hand, are vector images. As a result, they are highly scalable. Besides, they’re an excellent feature for responsive design because you can easily change the icon fonts to suit your needs. <\/span>In addition, there are numerous customization options, such as changing the size and color of the icons, rotating them, adding effects, and so on.<\/span><\/p>\n

The icon on your website is a subtle way of communicating to your audience that small details are important to you. People will trust you more if you pay attention to details. They believe you are serious about your content. It’s also evident that you enjoy what you’re doing.\u00a0<\/span><\/p>\n

Performance Issues to Take Into Account When Using Icon Fonts<\/span><\/h2>\n

Icons can be found inside icon libraries such as Font Awesome. You don\u2019t need to add these libraries to your WordPress website. Instead, you can connect to them with a tiny script. If you do this, you won\u2019t diminish page load speed.<\/span><\/p>\n

You won\u2019t be hosting the icon fonts locally, but only use those you need. We mean either your WordPress host’s server or your CDN. (Content Delivery Network) by loading them locally.<\/span><\/p>\n

Now, most WordPress themes or page builders will be doing this for you so that you don\u2019t need to worry about any scripts.<\/span><\/p>\n

By selecting only the icon fonts you require, you can reduce the file size from 100 KB to a couple of kilobytes, which is quite helpful! Even better, you can mix and match icons from different font sets.<\/span><\/p>\n

And now, let’s explore the different ways you can add WordPress icons to your website!<\/span><\/p>\n

How to Add WordPress Icons to Your Website<\/span><\/h2>\n

There are a couple of methods to add WordPress icons to your website, and today we’ll show you precisely what you need to do.\u00a0<\/span><\/p>\n

Option 1: Use a WordPress Plugin<\/span><\/h3>\n

One way to get started with WordPress font icons is to use a third-party plugin. This method is appropriate if you are a beginner-level user trying to add some icons to your posts or pages. You wouldn’t have to change any theme files, and you’d be able to use icon fonts throughout your website.<\/span><\/p>\n

And we might just have the perfect plugin for you.\u00a0<\/span><\/p>\n

Font Awesome<\/span><\/a><\/h4>\n

\"\"<\/p>\n

Using the Font Awesome plugin on your WordPress site is a walk in the park. However, following these simple steps will allow you to reduce page load time and create some clean, crisp designs with these icons as part of your work.<\/span><\/p>\n

Keep in mind that the Font Awesome icons will be delivered to your site as actual fonts (most of the time). As a result, the name Font Awesome was coined.\u00a0<\/span>Thanks to CSS via @font-face and the Font Awesome font family, you’ll be able to style and manipulate them in any way you’d typically style and manage a font character.\u00a0<\/span><\/p>\n

Now let\u2019s get to work.\u00a0<\/span><\/p>\n

First, go ahead and install and activate the plugin from your WordPress Dashboard.\u00a0<\/span><\/p>\n

\"\"<\/p>\n

You can see Font Awesome 5’s <\/span>basic use chart<\/span><\/a> and their icon library for more information on how to use and customize it. It\u2019s important to mention that Font Awesome works with shortcodes, so to generate an icon, you will need to type in a shortcode to the Gutenberg editor.\u00a0<\/span><\/p>\n

Once you are all set, head over to Settings from your Dashboard and go to Font Awesome.\u00a0<\/span><\/p>\n

This is what you will see:\u00a0<\/span><\/p>\n

\"\"<\/p>\n

Now let\u2019s say you want to add a WordPress icon to one of your posts. <\/span>Let\u2019s say we want to add a heart icon. This is the <\/span>shortcode<\/span><\/a> we are going to use:<\/span><\/p>\n

\"\"<\/p>\n

Next, go inside a post or page and add the shortcode block and paste the code from above. Next, hit “Preview” and watch how it magically turns into a little heart.\u00a0<\/span><\/p>\n

\"\"<\/p>\n

There\u2019s our heart icon! Easy, right? We had a Font Awesome icon up and running on our website within a few minutes.<\/span><\/p>\n

Now let’s say you want to make it three times larger. You can do so by simply multiplying it by fa-3x. You have to go back to the page editor where you first pasted the shortcode and add simply add ‘fa-3x’ to it.\u00a0<\/span><\/p>\n

\"\"<\/p>\n

Hit Preview and let’s see how much bigger our heart icon looks.<\/p>\n

\"\"<\/p>\n

Quite a difference, right? And that’s it! That’s how easy it is to add icons with the help of Font Awesome and make them appear larger or smaller according to your preferences.<\/p>\n

Option 2: Use the Built-In Dashicons<\/span><\/h3>\n

What are Dashicons? Dashicons are a set of font icons that come with WordPress and make it simple to add icons to your WordPress site. Since its inception, the project has become a valuable resource, with over 300 individual icons.\u00a0<\/span><\/p>\n

\"\"<\/p>\n

To get started with Dashicons, first, you need to install and activate a free plugin like <\/span>Code Snippets<\/span><\/a>. This reduces the possibility of your theme breaking, and the changes will be retained even if the theme is updated.<\/span><\/p>\n

Once the plugin is all set, go to the Dashicons website, select an icon, and click the “Copy HTML” link to get the code you need to display the icon. They don’t have a large selection, but they work well and are very light.<\/span><\/p>\n

\"\"<\/p>\n

After copying the HTML icon, you will need to head back to the Gutenberg editor and paste the code just like you did with the shortcode at option 1.\u00a0<\/span><\/p>\n

And that\u2019s it! Here\u2019s our little music dash icon!\u00a0<\/span><\/p>\n

\"\"<\/p>\n

And this brings us to the end of our two methods for using and inserting WordPress icons into your website. Now that you’ve learned a few different ways to get icon fonts on your WordPress site quickly, here are a few icon plugins to consider using on your site.<\/span><\/p>\n

Five Best Icons Plugins for WordPress Websites<\/span><\/h2>\n

Menu Icons by ThemeIsle<\/span><\/a><\/h3>\n

\"\"<\/p>\n

With ThemeIsle’s Menu Icons plugin, you can add corresponding icons to each item in your website’s menu to make it visually appealing. It’s one of the most popular icon plugins, with over 200,000 active installations worldwide. In addition, it supports Dashicons, which are made up of WordPress core icons.<\/span><\/p>\n

Supported Icon Types:\u00a0<\/span><\/p>\n