Add icon into wordpress menu ?

How to add icon into WordPress menu like this tipsbangla website? I was wondering how I can add icon into WordPress menu. If you follow my simple step by step tutorial below you can easily add them into your WordPress blog.

First step:

Create a child theme for your main theme first. How to create a child theme and why you use a child theme?


Now add the bellow code to style.css :

ul > li.about > a,
ul > li.home > a:hover{
display:block;
padding-left:50px !important;
line-height:36px;
background-image: url(/wp-content/uploads/2011/03/about.png)!important;
background-position:10px center !important;
background-repeat:no-repeat !important; }

Second Step

Now upload your about.png image with dimension 24x24 px or 32x32 px to the directory of your http://example.com/wp-content/uploads/2011/03/about.png. Or you can put a link after uploading the image into media library.

Now go to your dashboard menu. Go to screen option check "CSS Classes" box now you can put the css class into the menu link/page. Click the about page into the menu and put the "about" class into the "CSS Classes" box click save and refresh your browser.

If you wish to change other menu icon follow the step and change the class and image put the class into the appropriate menu link into the menu dashboard.