How to change UL bullet icon using jQuery

The <ul> element when used with <li> tag always appears in circular bullet and what if you want to change the default bullet icon with something of your own choice of icon. In this short post, I will show you how you can change the default bullet icon with other icon using jQuery.


First define a CSS class which will set the list-style attribute to none. The list-style property sets all the list properties in one declaration. So by using this CSS class, we are restricting the default style of the list items.
ul.HideStyle{
   list-style : none;
}
Now, just add this class to UL element and also prepend new icon text of your own choice. For example, I have used "*".
$(document).ready(function() {
    $("ul").addClass("HideStyle");
    $("ul > li").prepend("* ");
});​
See result below.



Feel free to contact me for any help related to jQuery, I will gladly help you.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..