How To Upload Custom Icon To Wordpress
In this article, we are going to illustrate how y'all tin add icons to WordPress custom menus without plugins for any theme.
You must have come up beyond websites that utilize icons to represent categories and sub-categories in the menu section.
It is a fact that icons beside the menu options look visually more appealing.
Information technology also makes the website looks premium and increases the trust factor massively.
Video Tutorial to Add Icons to WordPress Custom Menus
If you are using any gratuitous themes, it is certain that there are no options to add together icons to WordPress custom menus without plugins.
There are merely a few premium themes that provide the choice, but you have to be an advanced user to avail information technology.
The reason for not using a plugin for it is that it is a very pocket-sized work and there is no need of using a plugin and waste retention space and processing ability when you lot can use the same on something important.
It does non matter what type of website y'all have, information technology is always a good thought to brand 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 Icons To WordPress Custom Menus Without Plugins
By custom menus, we mean to say that you can add icons on any menu you take on your website start from the navigation carte du jour to double carte du jour on the superlative where social media icons and contact icons are placed with phone call to action options.
The first thing you need to do is upload all the icon images in your media department.
Stride one. Go to Admin Dashboard and motility 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 lot can proper name them and so that yous tin can retrieve which URL is for which icon.
Pace 2. Get back to Admin Dashboard and got o Appearance from the left menu and click on Menus.
In the new screen, click on Screen pick on the elevation correct corner and and then cheque the checkbox 'Display CSS Classes in Bill of fare Items' for the menus where you want to add icons to WordPress custom menus without plugins.
Footstep 3. Now, you need to curl downwards and click on any item on the current menu where y'all want to add icon. It will let you write CSS form proper noun.
The CSS form you mention here should correspond to the CSS course you write in the CSS program later on on.
Pace 4. Go to Admin Dashboard and become to Appearance again.
This time, click on Editor. Once the Editor opens, locate the stylesheet which is the theme's CSS file where all the design components are mentioned.
In that location y'all have to paste the following code.
.homepage { background-image: url('http://www.example.com/wp-content/uploads/2014/12/home.png'); background-echo: no-echo; groundwork-position: left; padding-left: 5px; } This is just for adding 1 particular icon to one particular carte du jour option. Here, 'homepage' is the CSS class proper noun that yous mentioned in Step 3 and URL here is the corresponding URL you copied from the Notepad file where you lot pasted the URL.
For case, your card has seven categories on your card. Then, you lot have to paste the above-mentioned code seven times with corresponding CSS classes for different options names you set in Pace 3 and so replaced the URL of the images accordingly.
Alternative Fashion To Add Icons To WordPress Custom Menus Without Plugins
In case you practice non desire to upload the icons and want to apply some professional person and stunning icons that will increment the branding of your website, yous have to have a different road to add together icons to WordPress custom menus without plugins.
Besides, you may utilise one of these photo editing software to create your brand'southward icon from scratch.
There is a library available named Font Awesome where all the different types of icons are available. All you need to practise is add together the CSS classes afterward activating this Font Awesome library, and the appropriate icons will be placed abreast the carte options.
Step i. Get to Dashboard>Appearance>Editor. Open functions.php and add the post-obit.
What this code does is that it registers Font Awesome stylesheet from the external link mentioned. You lot could have placed inside header.php just that is not a good practice.
Step ii. This step is similar to what you take already washed before which is going to Dashboard>Appearance> Menus. Then click on Screen Options in the pinnacle right corner and check the checkbox side by side to CSS Classes.
Step 3.
It is important to use the right form name and then that appropriate icons are placed abreast card options. The following is a list of class names that comes with Font Awesome and you should employ them accordingly.
For Home: fa fa-lg fa-home
For News: fa fa-lg fa-newspaper-o
For Gallery: fa fa-lg fa-camera-retro
For Nigh: fa fa-lg fa-info-circle
For Contact: fa fa-lg fa-envelope-o
Where fa stands for the primary class, fa-lg stands for large icons so the residue part according to requirements. For example, yous go to Dashboard> Advent> Menus and select Primary card.
The domicile option will be the very starting time option, and for that, yous should use fa fa-lg fa-dwelling as the class name so that when yous salvage it and refresh your homepage, y'all could see the change.
If you have knowledge of CSS, you lot can easily modify the Font Awesome CSS and make necessary changes equally per your requirement.
What Is The All-time Plugin Available To Add together Icons To WordPress Custom Menus?
This is only for knowledge and for new users who practice not want to use lawmaking and stylesheet due to lack of cognition and prefer a plugin for everything. The about popular plugin to add together icons is
Carte du jour Icons
After installing and activating the plugin, you accept to go to Dashboard> Advent> Menus.
For every menu option, you will find a field named Icon where you lot can select the icons for the library provided and brand your website more visual.
Source: https://www.sktthemes.org/wordpress/add-icons-wordpress-custom-menus/
Posted by: rachalamoved.blogspot.com
0 Response to "How To Upload Custom Icon To Wordpress"
Post a Comment