Coding | CSS | Responsive Webdesign

CSS List Styling mit Unicode

bottles 1640820 1920

Nicht für jedes Icon das keine Grafik sein soll braucht man einen Iconfont. Auch Unicode ist mit dem einen oder anderen Schriftzeichen ausgestattet, mit dem man beispielsweise seine Listen aufpeppen kann.

  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  • item 6
  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  • item 6
  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  • item 6
  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  • item 6
<ul class="unicodedeco heart"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> </ul> <ul class="unicodedeco diamond"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> </ul> <ul class="unicodedeco checkmark"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> </ul> <ul class="unicodedeco"> <li class="heart">item 1</li> <li class="diamond">item 2</li> <li class="checkmark">item 3</li> <li class="heart">item 4</li> <li class="diamond">item 5</li> <li class="checkmark">item 6</li> </ul>
/* common styles */ #content ul.unicodedeco { list-style-type:none; padding-left:0; } #content ul.unicodedeco li { list-style:none; padding-left:18px } #content ul.unicodedeco li:before{ display:inline-block; float:left; clear:left; } /* hearts */ ul.heart li:before, li.heart:before { content:"\2665"; color:#cc0066; margin-left:-15px; } /* diamonds */ ul.diamond li:before, li.diamond:before { content:"\25c6"; color:#005a93; margin-left:-17px; } /* checkmarks */ ul.checkmark li:before, li.checkmark:before { content:"\2713"; color:#66c4ad; margin-left:-17px; }

weiter schmökern

Schreibe einen Kommentar

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden.

Deine E-Mail-Adresse wird nicht veröffentlicht.