How to Upload Custom Icons to Wordpress
Do you lot want to spice up your WordPress navigation card with some cool custom icons?
What if I tell you lot that you could do that for gratuitous, without a plugin and it is not that hard too!
What are we going to do?
In this post, we will download a few icons to add to our navigation menu. We will upload these icons to the WordPress Media Library and finally, we volition utilise the icons for our WordPress menu links with a few lines of CSS.
No plugins?
I know a popular and piece of cake style to add together custom icons to your WordPress card is to install the Better FontAwesome plugin.
This is a neat way to do this, simply… sometimes the icon you are looking for is not available in the Font Awesome library, or you merely institute a actually absurd icon online that yous are eager to show off on your website, merely just don't know how.
If you follow along with this step-past-stride guide, you won't have a problem to add your own icons.
Earlier we go started
For this tutorial you lot will need a child theme. The easiest fashion to create a kid theme is with a plugin, like Child Theme Generator. After you lot are finished creating your child theme, you can straight delete this plugin.
Find the Icons
With all the resources available online for free icons, this step won't be a trouble.
Some bang-up resources for free icons are Flaticon, Freepik and Icons8.
This time I will apply Flaticon. Go to flaticon.com and search the icon y'all want.
For a skillful user-experience, choose an icon that represents the link, so don't get too crazy, or y'all might misfile your visitors.
Choose a small size, that fits your menu'southward font size. The size of my icon is 32px.
Download the icons and relieve them. You lot might want to proceed the filename short and uncomplicated for further utilize.
Upload the custom icons to wordpress
In your WordPress Dashboard, hover on the left sidebar over Media and choose Add New.
Browse to your files to upload them or drag and drop them on the rectangle.
Now the icons are accessible in WordPress.
On the right side, you see the file URL ( i.east. http://example.com/wp-content/uploads/2021/04/house.png )
Re-create and paste the link in Notepad for an example, because we will utilize this subsequently to indicate to the file in CSS.
Add a CSS Class to the menu links
Now nosotros need to add a class to the carte du jour links, which we desire to add a custom icon to.
On the left side in your WordPress Dashboard, cull Appearance -> Menus. All the way on the top on the right side the is a button that says Screen Options. Click information technology and check the checkbox CSS Classes.
This will enable the option to add a CSS Class.
Open your menu beneath, click on a link, for me that is "Home" and y'all see a field where you can add a CSS class. My .png file is chosen house.png and I want to use it for the Habitation link, so I add the course house. Relieve the menu.
Add the CSS
This is the well-nigh difficult office, the CSS. I endeavor to keep it as elementary as possible, that is why for this case we volition execute everything step from inside the WordPress Dashboard.
On the left sidebar, choose Appearance and so Theme Editor. In styles.css we will add together CSS to the menu grade. In the example I apply the class house.
This code will add together an icon on the left side of the carte du jour link. Hither an example for my house.png and menu class firm.
background-image: url() Paste in the URL to that you copied earlier from the Media Library.
groundwork-size This will determine the size of your icon. Keep it below the actual size to keep your icon sharp.
groundwork-repeat This volition display the icon but once.
background-position "Left" will identify the icon on the left side of the menu link.
padding-left Creates a margin between the icon and the menu link. Play with information technology for the right results.
Echo the steps higher up for the other links until all carte du jour links take a custom icon.
Finito!
And there you accept it, your ain unique WordPress menu with your hand-picked custom icons!
I hope yous have fun following along this tutorial and your carte looks smashing!
Delight comment beneath for any questions and stay tuned for more upcoming tutorials.
Source: https://windtwebdesign.com/en/how-to-add-custom-icons-to-my-wordpress-menu-without-using-plugins/
Post a Comment for "How to Upload Custom Icons to Wordpress"