If you want to add icons to your site’s menu, it’ll give your visitors some visual clues about the content. You will also be able to add a nice design touch to your own site by following our step by step instructions. Well, in this article we will show you how you can easily add icons to custom WordPress Menu without any plugin or images. At end when finish you’ll have some icons next to each item in your navigation menu. Moreover, you won’t need to upload any images or files which make your site slow down – How to Add Font Awesome Icons to WordPress Menus without Plugin
Create a Child Theme
In case you don’t have a theme, then you will need to create one to work with. We recommend you the child theme that is the easiest way of an existing theme. It means that you can easily add your own changes without doing even a single thing to original theme. You can create a child theme of the default theme. If you are new to the child theme then you can need some guidance from our site or internet.
Activate the Font Awesome Library
In next step you need to activate the Font Awesome library in your theme.
The Font Awesome is the library of icons created to sue icon font. Simply it means that it doesn’t use any background images. In place of it uses CSS classes, to add a pseudo element to anything with an icon class.
The pseudo element adds a special character before the element along with the icon style. You have to get start by activating Font Awesome in your theme. Then create a new file called function.php in your theme folder. Furthermore, if your theme has a functions file, start to open it.
Add CSS to the Menu Items
Up to this stage your Font Awesome is registered, now you can use CSS classes which provides adding icon to your menu items. Go to Appearance>Menus in the WordPress Admin where you can edit your navigation menu. In case you are not having or haven’t created a navigation menu, create on the spot and tick the checkbox in the menu screen. So that it is in the ‘Primary Navigation’ slot in your own theme.
WordPress is letting you to add a CSS class to every item in your menu. However, you are not able to see the field to this by default. First you must switch on it;
- Click the Screen Options tab on the top of the screen
- Check the box next to the CSS Classes
- Close the Screen Options tab
Finally, you can add a class to any of your menu items. You can start with the ‘Home’ menu item. After that click on the downwards arrow next to the menu item, it will view more options related to that menu item.
fa fa-lg fa-home
fa
is used for all items with a Font Awesome icon
fa-lg
sets the size of the icon to large
fa-home
relates to the specific icon you want to display.
Give Style to the Menu Item
First take a look to your site’s menu in the front end, the fonts in your menu will have changed. The icons will be above the text when you want them to the left. All of your menu items will be next to each other when they need to be one above the other.
If you are working with your own theme, you could know that your menu looks worse or better than before or for the first time. You will also need to make some different tweaks.
When you want to fix the problems in your site, you need to add some styling to your style sheet.
Keep in mind that if you are working with your own theme, you might need to target different classes or IDs to your menu. It depends on how you have coded your theme. So let’s start by making the menu items that are one above the other. First open your theme’s style sheet and add the following code;
- .main-navigation ul li {
- width: 100%;
- }
This will ensure that each menu item takes up 100% width of its containing element. Now when you refresh your screen, the menu will be looking better than before.
Your menu items are in the right place now, however, the icons should be to the left of each menu item. For doing this, fix the following by adding to your style sheet.
- .fa::before {
- float: left;
- }
Finally, save your style sheet and then refresh your screen. All the icons will be in right and better place. So that’s all, we are sure that you can take enough help from our article and instructions. For further information you can visit to our stie at WWW.INTERNETSEEKHO.COM
