How To Design Bullet List Ul Gtli In Html Css
in HTML there is too many option to accomplish a small task. Every kind of option make a different result. In this post I will show you how you can design ul li better way 
- List item
Here is a some guideline proper Guideline using list-style-type property you can show the circle, disk square shape just before the list item. This is nice way.
If you have icon instead of shape that html provided then you need to use list-style-image If this thing not fit with your requirement then you need to set it to none and use non-repeated images (Through background-image) that will be shown at the position whichever you want through Background position
If you have the theme of page in your mind (Everything is ready and you just need to write html to make it finish) then setting icon is good choice. Remember that You can’t change the color of image (icon in this context) by using any property in css. Image is static which not allowed you to change their color by any css property.
in case of PNG some cased allowed you to modify the background color of image but maybe This implementation going buggy in old browser.
In this case I would like to set the icon through content property in Css and change the color whenever we want through color property in css.
This thing going something as
li:before{
content:”xyz”;
color:red;
}
Remember that xyz is utf8 based entity character which can be a pretty looking UTF8 icon shown before li. You can modified the color of this thing whenever you want.
For better example suppose you have font which contain a lot of pretty icon. Now you can use them in your web-apps through HTML5 features which allowed you to embedded the custom fonts (font-face , cufon)
This way you can implement the typography you like to implement in your web-apps. For example see a nice example called Font-awesome which provide a lot of icon.
in Font-awesome you need to tried thing like
in this li you have shown the expand alternative icon in the list-item. If you have write a lot of li then this code is not looking good.
You can tried it also this way
li:before{
content:”myiconcode”;
font-family:”Fontawesome”;
}
Now open the firebug and copy the content value for the icon you have set and replace it with “myiconcode”. Now you not need to write I with icon class anymore. this way you code look some more beautiful.
As fontawesome use their own font we can implement our own fonts (or whatever we can do). Now remember that this thing have one more benefit . The benefit is setting color on anytime is possible. You can increase the font size to make icon bigger and smaller.
Thanks for read this post. The information I post in this blog-post is thing I learned from other people. The title of this post is about list-icon but you can applied the font-icon using x:before on any element like
Cheers 