Liste cu simboluri personalizate

Chiar dacă listele au câteva oferte predefinite, se pot folosi şi alte opţiuni.
De exemplu, dacă se doreşte folosirea unei mingi se poate apela la următorul cod:

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>

Efectul va fi următorul:

  • 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

Dacă este necesară folosirea unor simboluri predefinite şi pentru liste multinivel, o variantă ar putea fi precum cea de mai jos:

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>

Efectul este precum cel de mai jos:

  • lorem ipsum
  • lorem ipsum:
    • lorem ipsum
    • lorem ipsum
    • lorem ipsum

Author: Ovidiu.S

Suficient de pasionat de această zonă profesională ca, în cazul în care ştiu ceva - cât de puţin - să împărtăşesc cu alţii.

Lasă un răspuns