Karakter als CSS lijsticoon

Categorie: Coding and stuff
tags: 26

Tijdens mijn werk liepen we tegen de situatie aan dat het wenselijk was om in een design geen standaard lijsticoon te gebruiken, maar ook geen afbeelding. De wens was om een ASCII code character te gebruiken. Ik riep dat kan niet. Of toch wel...

Dan ga je zoeken. En denken. En dan kom je tot een soort van oplossing. Mijn eerste reactie was juist, het kan eigenlijk niet. (Als je dit leest en het beter weet, deel het dan vooral middels onderstaande reactieformulier)

Lijsticonen, wat kan

Lijsticonen, wat kan zoal. Nou best weinig, in elk geval voor de unordered list:

<ul>
  <li type="circle">circle</li>
  <li type="disc">disc</li>
  <li type="square">square</li>
</ul>

Dat ziet er dan zo uit:

  • circle
  • disc
  • square

Beetje beperkt nietwaar. Gelukkig is het mogelijk om niet te kiezen voor een type, maar voor een image.

ul {list-style-image:url('iconimage.gif');}

Wat kan niet

Nou, je kunt dus geen character opgeven:

ul {list-style-character:"-";}

En dat is natuurlijk best jammer. Gelukkig stopt het daar niet.

Een workaround

De workaround werkt middels twee css-elementen: content en :before. Met content plaatsen we het gewenste karakter, maar :before geven we aan waar de content moet worden geplaatst. Stel dat we een lijst willen met een ‣ (&#x2023;), dan kan dit als volgt:

ul li:before {content: "\2023";}

Dit wordt dan iets als:

In dit voorbeeld heb ik ook een padding opgenomen, anders staat het icoon wel erg kort op de tekst.

Going (Font) Awesome

Tja, als we dit dan kunnen, dan kunnen we natuurlijk nog veel meer. Laten we eens een lekker zinloze route kiezen. Het is natuurlijk mogelijk om Font Awesome in te zetten om via die route iconen als karakter in te sluiten. En die weer aan onze lijst te hangen. Zoals ik al zei, zinvol is anders ;-)

Laadtijd: