Use Webfont Icons as a Bullet Point in List

HTML list style always boring, You can only define disc, circle and square in list style, also not really easy to change their color and size. You can use list style image but it very difficult to match with font size and positioning.


We can easily use webfonts as a bullet point and in list style type. When a designer design a website he always use icons in theme, mostly designer use icon images for list type which is difficult and not easy process compare to use of web font icons.

FontAwesome is most popular webfont as use of webfont icons because in fontawesome many types of icons have.

Steps to use FontAwesome webfont icon in theme

Step 1

First of all you should have FontAwesome font set, you can download it from here. After that download the font add this folder in your theme and add fontAwesome css in your theme header file using this code

Step 2

Now your webfont icon is ready to use in your theme, use icons in list type as like below example

We can use different icon in different li class like this

So webfont icon really magical way to use icons in theme, i use mostly fontawesome in my themes.
suppose if i want to use webicons in my sidebar list than i add this code

thats it i think this post will help you to use web font icons in easyway i hope you will like it

“Use Webfont Icons as a Bullet Point in List”