How To Add Custom Icons In Wordpress

Icons WordPress Custom Menus

In this article, we are going to illustrate how yous can add icons to WordPress custom menus without plugins for any theme.

You must accept come across websites that use icons to represent categories and sub-categories in the menu section.

It is a fact that icons beside the menu options await visually more than appealing.

Information technology also makes the website looks premium and increases the trust factor massively.

If yous are using any free themes, information technology is certain that there are no options to add icons to WordPress custom menus without plugins.

There are only a few premium themes that provide the selection, but you have to be an advanced user to avail it.

add icons WordPress menus

The reason for not using a plugin for information technology is that it is a very small work and there is no need of using a plugin and waste memory infinite and processing power when you can utilise the same on something important.

It does not matter what type of website you accept, it is always a skilful thought to make your website more visual than textual, and hence, you should add icons to WordPress custom menus without plugins using the following mentioned steps.

Steps To Add together Icons To WordPress Custom Menus Without Plugins

By custom menus, we mean to say that yous can add icons on any bill of fare you have on your website starting time from the navigation menu to double menu on the summit where social media icons and contact icons are placed with call to action options.

The offset thing you demand to practice is upload all the icon images in your media department.

Stride 1. Become to Admin Dashboard and move to Media option on the left menu and click on Add New. Select all the icon images and upload them.

Afterwards uploading, open a notepad file and paste the URLs of each icon and you can proper noun them and so that y'all can recollect which URL is for which icon.

Step ii. Become back to Admin Dashboard and got o Advent from the left menu and click on Menus.

In the new screen, click on Screen option on the top right corner and so check the checkbox 'Display CSS Classes in Carte Items' for the menus where you want to add icons to WordPress custom menus without plugins.

Step iii. Now, yous demand to scroll down and click on any item on the electric current carte where yous desire to add together icon. Information technology volition let you write CSS class name.

The CSS form you lot mention here should correspond to the CSS course you write in the CSS program later on.

Step 4. Go to Admin Dashboard and go to Appearance again.

This fourth dimension, click on Editor. Once the Editor opens, locate the stylesheet which is the theme's CSS file where all the pattern components are mentioned.

There you have to paste the following code.

.homepage { background-image: url('http://www.instance.com/wp-content/uploads/2014/12/habitation.png'); background-repeat: no-echo; background-position: left; padding-left: 5px; }

This is but for adding one particular icon to 1 item bill of fare option. Here, 'homepage' is the CSS class name that yous mentioned in Step iii and URL hither is the corresponding URL you lot copied from the Notepad file where you pasted the URL.

For example, your menu has vii categories on your menu. So, y'all have to paste the to a higher place-mentioned code vii times with corresponding CSS classes for dissimilar options names you set in Step 3 and then replaced the URL of the images accordingly.

Alternative Way To Add Icons To WordPress Custom Menus Without Plugins

In case you do not want to upload the icons and desire to utilise some professional and stunning icons that will increase the branding of your website, you have to take a dissimilar road to add icons to WordPress custom menus without plugins.

Too, you may use one of these photo editing software to create your brand's icon from scratch.

There is a library available named Font Awesome where all the dissimilar types of icons are available. All you need to practice is add together the CSS classes later activating this Font Awesome library, and the appropriate icons volition be placed beside the menu options.

add icons WordPress custom menus

Stride 1. Go to Dashboard>Advent>Editor. Open functions.php and add the following.

What this code does is that it registers Font Awesome stylesheet from the external link mentioned. You could have placed inside header.php but that is not a practiced practice.

Footstep two. This step is similar to what y'all have already done earlier which is going to Dashboard>Appearance> Menus. And then click on Screen Options in the summit right corner and check the checkbox next to CSS Classes.

Pace 3.
It is of import to use the correct form name so that appropriate icons are placed beside menu options. The post-obit is a list of course names that comes with Font Crawly and yous should utilize them appropriately.

add icons WordPress menus

For Domicile: fa fa-lg fa-dwelling house
For News: fa fa-lg fa-newspaper-o
For Gallery: fa fa-lg fa-camera-retro
For About: fa fa-lg fa-info-circumvolve
For Contact: fa fa-lg fa-envelope-o

Where fa stands for the master class, fa-lg stands for large icons and so the residual part co-ordinate to requirements. For example, you go to Dashboard> Appearance> Menus and select Primary menu.

The home option will be the very first option, and for that, you should use fa fa-lg fa-home as the class name so that when you lot save it and refresh your homepage, you could encounter the change.

If you take knowledge of CSS, you can hands change the Font Awesome CSS and make necessary changes as per your requirement.

What Is The Best Plugin Available To Add Icons To WordPress Custom Menus?

This is just for knowledge and for new users who do not want to utilise code and stylesheet due to lack of knowledge and prefer a plugin for everything. The most popular plugin to add together icons is

Menu Icons

add icons WordPress

After installing and activating the plugin, you lot have to go to Dashboard> Appearance> Menus.

For every menu option, you volition find a field named Icon where y'all can select the icons for the library provided and make your website more visual.

Shri shares exciting WordPress themes, plugins and other WordPress related news for our viewers. He also posts selected WordPress developers interviews from time to time.