WordPress Icons: How to Make The Most Out Of Them

 

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

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?

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 “4 out of 5 clients that bought this HP DeskJet are recommending it”. 

Why Use WordPress Icons?

Let’s start with the basics. Icons are at their core…fonts. Surprised much? You can change their size and color, as you would with any other font. 

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. 

Here’s what I mean: 

Probably the icons that you’re most familiar with are the social media icons: Facebook, Youtube, and others, right? Some of you might have thought that icons are images. 

So, you might wonder, why not images if the two are so similar?

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. 

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. In addition, there are numerous customization options, such as changing the size and color of the icons, rotating them, adding effects, and so on.

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. 

Performance Issues to Take Into Account When Using Icon Fonts

Icons can be found inside icon libraries such as Font Awesome. You don’t 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’t diminish page load speed.

You won’t 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.

Now, most WordPress themes or page builders will be doing this for you so that you don’t need to worry about any scripts.

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.

And now, let’s explore the different ways you can add WordPress icons to your website!

How to Add WordPress Icons to Your Website

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. 

Option 1: Use a WordPress Plugin

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.

And we might just have the perfect plugin for you. 

Font Awesome

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.

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. 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. 

Now let’s get to work. 

First, go ahead and install and activate the plugin from your WordPress Dashboard. 

You can see Font Awesome 5’s basic use chart and their icon library for more information on how to use and customize it. It’s 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. 

Once you are all set, head over to Settings from your Dashboard and go to Font Awesome. 

This is what you will see: 

Now let’s say you want to add a WordPress icon to one of your posts. Let’s say we want to add a heart icon. This is the shortcode we are going to use:

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. 

There’s our heart icon! Easy, right? We had a Font Awesome icon up and running on our website within a few minutes.

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. 

Hit Preview and let’s see how much bigger our heart icon looks.

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.

Option 2: Use the Built-In Dashicons

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. 

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

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.

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. 

And that’s it! Here’s our little music dash icon! 

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.

Five Best Icons Plugins for WordPress Websites

Menu Icons by ThemeIsle

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.

Supported Icon Types: 

• Dashicons (WordPress core icons)
• Elusive Icons by Aristeides Stathopoulos
• Font Awesome by Dave Gandy
• Foundation Icons by Zurb
• Genericons by Automattic
• Fontello icon packs
• TI Icons icon pack by ThemeIsle
• Image (attachments)
• SVG (attachments)

WP SVG Icons

Features of the plugin:

• Includes more than 490 icons in total; 
• Create and upload custom icons by using the custom icon importer;
• Download and import the IcoMoon’s custom icon build;
• Incorporate Icons Into Posts/Pages/Sidebars;
• There is no requirement to write a single line of code. 

Social Media Share Buttons & Social Sharing Icons

An active social media presence is a must-have strategy for expanding the fan base. Facebook, Twitter, and LinkedIn are powerful social media platforms. The central concept is social sharing.

This plugin is a powerhouse for a comprehensive collection of share icons for over 200 social media platforms. Furthermore, this plugin allows you to upload custom share icons tailored to your content marketing campaigns. RSS and email share icons are also available.

Features of the plugin:

• Choose from 16 unique designs for your social media share icons;
• Give multiple actions to a single social media share icon (e.g., your Facebook share icon can lead visitors to your Facebook page and allow visitors to like your page); 
• Make your social media icons animated (e.g., automatic shuffling, mouse-over effects) to make your visitors aware of the share icons and increase the likelihood that they will follow/share your blog;
• Make your social media icons “float” or “sticky”; 
• Allow visitors to sign up for your blog via email; 
• Choose from a variety of other customization options for your social media icons.

Social Icons Widget & Block by WPZOOM

This simple WordPress icons plugin allows you to easily add icons from various social media sites with links to your pages. Making connections with your readers on social media is integral to effective marketing. You can use this plugin to make it easier for your website visitors to connect with you via your social media pages. 

Some of the social icons available include Facebook, Twitter, Google+, Instagram, Pinterest, Skype, Vimeo, Flickr, and YouTube. With over 200,000 websites trusting it, it’s undeniably a popular plugin with features and tools that are difficult to overlook.

Features of the plugin:

• Upload your SVG icons; 
• Load SVG icons; 
• Create your own custom icon set; 
• Outstanding performance; 
• Premium Support.

Menu Image, Icons Made Easy

As the name suggests, it is a simple icons plugin for WordPress, similar to the first on this list. However, it aids in creating a more visually appealing website menu. This plugin can easily insert an image or icon into a menu item. It also includes tools to control the image’s position and size. 

Features of the plugin: 

• DashIcons; 
• FontAwesome Icons; 
• Hide the title and only display the image or icon;
• Insert an image or icon to the left of the menu item title;
• Insert an image or icon to the right of the menu item title;
• Add an image or icon above the menu item title;
• Add an image or icon beneath the menu item title;
• When you move your mouse over a menu item, it will change the image or icon;
• Convert menu items into action buttons. (Premium);
• Add a count bubble to menu items with totals (cart total, category total, custom function);
• Notification badges on menu items (Premium) (New, Sale, Hiring, etc.).(Premium);
• Customize the colors of the buttons, badges, and bubbles;

Managing Icons via Page Builders

I’ll use two page builders in this example: Colibri and Kubio.

Colibri is a traditional page builder that extends the capabilities of the WordPress Customizer. Kubio Builder is a plugin that works with the WordPress Block Editor (Gutenberg). There are both free and paid plans available from both builders. 

Most builders will now follow a similar path to that of Colibri. In addition, page builders contain a slew of other features that can help you design a website without writing a single line of code and without relying on plugins to compensate for parts that aren’t native to WordPress.

• How to customize icons in Colibri WP

We’ll use the Colibri WordPress theme and the Colibri page builder for this tutorial section and show you how to customize icons easily. 

Once you have installed and activated the Colibri Theme, add some icons to your pages. For this to happen, click on the big blue plus sign on the top of the page, then choose ‘icon’ from the Component section. 

From here, you can simply drag and drop the icon you wish to use on your page. 

Now, on to the Customizer. 

Here you can notice three menu items: Content, Style, and Advanced.

Let’s take them one by one.

At the “Content” level, you can:

• Change the icon image; 

• Paste the link where you want the icon to lead to when clicked; 
• Set the horizontal alignment of the icon.

At the “Style” level, you can:

• Change the icon color;

• Change the icon hover color; 
• Set the icon size; 
• Set the icon rotation; 
• Set the spacing of the background and border; 
• Set the border type (solid, dashed, dotted, double, groove, ridge, inset, outset, hidden) 
• Set the border-radius. 

And next, we have the ‘Advanced’ customization options, but those are limited to premium accounts only. 

How to customize icons in Kubio

Kubio is a block-based page builder that works on top of the Default Gutenberg Editor. It enriches it with new blocks and ready-made sections that are fully customizable. 

For this particular example, we will use the Elevate WP theme in my example, but you can use any theme you’d like; Kubio is compatible with any WordPress theme.

After activating Elevate WP and Kubio builder, let’s head over to Pages -> All Pages. Now, hover over a page and select “Edit with Kubio.”

Once you enter the editor, you will see a big blue plus sign at the top of the page, which will open the blocks section from which you can add the icons you wish to customize. 

Once you have selected the icon, you wish to add to your page, click on it, and let the drag and drop technique work its magic. 

As you can see, we have three options for customizing the icon: Content, Style, and Advanced. Let’s go over each of them. 

At the ‘Content’ level, you can: 

• Change the icon image; 
• Paste the link where you want the icon to lead to when clicked; 
• Set the horizontal alignment of the icon. 

At the ‘Style’ level, you can: 

• Change the icon color;

• Change the icon hover color; 
• Set the icon size; 
• Set the icon rotation; 
• Set the spacing of the background and border; 
• Set the border-radius. 

At the ‘Advanced’ level, you can:

• Choosing a background color and type for your WordPress button; 
• Setting up the paddings and margins of your button; 
• Making adjustments to the border and radius;
• Enabling or disabling box-shadow;
• Typography matters in font style, font size, weight, color, decoration, line height, letter spacing, etc. 
• Specifying whether the button should show up on mobile, tablet, and desktop.
• Miscellaneous settings – include adding additional CSS classes, HTML anchor, and Z index. 

I believe that the potential options within Kubio are fantastic. This level of styling control is available in all of Kubio’s blocks, from headings and images to sliders and counters.

You can use Kubio with any WordPress theme, and it will quickly help boost the features of any theme without the need for any additional WordPress plugins.

Over to You

When it comes to WordPress menu icons, the advantages are numerous. First, they liven up your website, making the navigation more user-friendly. 

And now, with the help of our article, you have a couple of methods for including them on your website and some useful plugins to help you along the way. Using icons will undoubtedly benefit you in various ways, including capturing your visitors’ attention in seconds and delivering information faster than before.

Now, if you liked this article, and you want to learn more about how to design a WordPress website, make sure to subscribe to our Youtube channel and follow us on Twitter and Facebook!

 

[sibwp_form id=1]