Learning 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.