How To Add Icons in Navigation Menu Along With Text

Adding icons before Options in navigation menu in blogger make’s the blog more pretty.Icons before text will also create a good impact on Blogger template.If you are using a WordPress blog this option is very simple by adding a PlugIn called IconIt.But in case of Blogger/Blogspot blogs we want to manually add the HTML section of your blog and insert a piece of HTML tag.

All you want to do is  follow the below given  steps and add a piece of HTML tag

Demo ::

Also Check : Add Alexa Site Metrics Certificate To Any Blog

  • Go to Blogger  > Dasboard > Template > Edit HTML
  • Go to the section of Navigation menu,To find,If you want to add icon before the option named “Download” then press Ctrl + F and in the box type as “Downloads
  • Then select the whole code of the particular option you want to add icon 
  • Replace the Code of your option with the code given below :

<li><a href='http://www.ipeeworld.ga/search/label/Tutorials' itemprop='url'><i class='fa fa-paper-plane'/><span itemprop='name'>Tutorials</span></a></li>

Changes To Make

  1. Replace the red coloured URL with the URL of your label.
  2. Replace the code “fa fa-paper-plane” with your icon code you can browse and add your favourite code here : Visit Now
  3. Replace the word “Tutorials” with the name of your option
Do it for your all options in navigation menu to change all
Also Check  How To Use Custom Permalink On Blogger Blog

About the author

Astro Joseph

Hey Guys, I'm Astro K Joseph, Founder and CEO of IPEE World from Kerala, India. I started this blog as a passion and it now empowering thousands of readers around the globe.Here I usually share stuff related to How To, Android, Windows, Facebook, WhatsApp, Blogging, etc.

Leave a Comment