When we talk about page speed, we have to take care of how many images you are using in websites. So many images will make the page speed slow. So another thing that we can use instead of images is icons. Icons give an additional look at your website and also they not much affect the page speed.
Icons are fully responsive and easily customizable and also they are vector based so you can resize them to any instant without pixelation. They have a sense and can be used anywhere on the website.
Icons in menu give an additional look at the menu. So here we will discuss how we can use icons in the menu.
Adding icons in Custom Menu
First, you have to import font awesome icons in your theme. To know how we can import font awesome icons in the theme read our previous article.
After importing font awesome icons in your theme you have to follow these steps:
- Log in to your dashboard and hover on Appearance option given in the left sidebar and click on Menus option.
- A new window will open and you can see your menu. To create a new menu read our previous article.
- Click on Screen Options given on the top-right side of the page.
- A popup will open and you can see lots of options there. Select CSS Classes option.
- Now if you click on any of the menu items you will see CSS Classes option is visible below.
- Enter a font awesome CSS class in the given field. To check font awesome CSS classes visit the link. Add a ‘fa’ prefix before the font awesome class. See below screenshot:
- Then click on Save Menu button given on the bottom-right side of the page to save your changes.
- Visit your website front end to see the changes.
You will see the icon is not properly aligned with your menu name. So you have to use CSS to properly align the icon with menu name.
You can also check how to add Font awesome Icons in WordPress without Plugins.