Bullets lists with custom symbols

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

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

<ul class="minge">
<li>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 </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

/*
------------------------------
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

<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

Author: Ovidiu.S

I am quite passionate about this professional area as if I know something - no matter how little - I want to share it with others.

Leave a Reply