Even if you have some predefined offers of bullets lists, you can use other options. For example, if you want to use a soccer ball, you can use the following code:
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 |
ul.minge li { list-style: none; margin-left: 0; padding-left: 0em; text-align:justify; } ul.minge > li:before { display: inline-block; content: "⚽"; width: 1.4em; margin-left: -1.4em; } |
HTML
|
1 2 3 4 5 |
<ul class="minge"> <li>Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee </li> <li>Tea</li> <li>Water</li> </ul> |
This will be the effect:
- Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee CoffeeCoffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee
- Tea
- Water
If it is necessary to use predefined symbols for multilevel lists as well, a variant could be like the one below:
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/* ------------------------------ Bullet pentru Check ------------------------------ */ ul.bifat li {list-style-type:none;} ul.bifat li:before { content: "\f046"; /* Unicode */ font-family: FontAwesome; display: inline-block; margin-left: -1em; width: 1.3em; color:blue; font-size:18px; text-align:justify; } ul.bifat li ul li { list-style-type:none!important; padding-left: 10px ; text-indent: -10px ; } ul.bifat li ul li:before { content: "\f0c8"; /* Unicode | f08d - pin */ font-family: FontAwesome; font-weight:bold; display: inline-block; color:blue; font-size:10px; padding-left:6px; } |
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<ul class="bifat"> <li>lorem ipsum</li> <li>lorem ipsum: <ul> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> </ul> </li> </ul> |
The effect is as below:
- lorem ipsum
- lorem ipsum:
- lorem ipsum
- lorem ipsum
- lorem ipsum
JSFiddle
For a variety of custom lists, you can also see the following examples.
