Using Image As Bullet In List

You guys might have noticed that there are two type of bullets available in blogger. They are;

• Un-ordered List.
• Ordered List

As we already know that in un-ordered list circular disc appear and in ordered list numbers appear. These are by default provided by blogger. One can use them by clicking on bullet icon in the post editor.

But today we shall be discussing a little advanced trick. Everyone knows how to use default bullet but every one do not know how to use an icon as a bullet. Before sometime even I believed it was not possible but I was practicing. Finally my practice paid of today morning. I was able to complete my task. See a preview of my work below;

If you still think then without hesitation I want you to see a live demo here. I apologize as  the site is little messed up, but I shall fix it soon. Now are you interested? If yes follow below;

• You will need to add a simple CSS code which is given below. If you don't know how to add CSS then read this.

ul {
margin: 0px;
padding: 5px 0px 0px 15px;
list-style-image: url('Your-Bullet-icon-Url')
}

• In the above code replace Your-Bullet-icon-Url with the direct link to your bullet icon.

Save your code and you are done with it. Now view your blog and you will find your custom bullet icon instead of the bold square or circular disc.

If you have any problem comment below.

I hope you enjoyed the post.

Happy Blogging!!

Author : Anonymous

Share this

Related Posts