Mooiere lijsten op je WordPress website met Font Awesome

Voor wie wel eens lijsten gebruikt op zijn WordPress website, bijvoorbeeld in berichten of in de sidebar, kan het leuk zijn om de standaard nummering / bolletjes aan te passen. Dit kun je heel makkelijk doen met behulp van Font Awesome. Voor wie een duidelijk beeld wil krijgen van de mogelijkheden, vind je onderaan het bericht een voorbeeld.

Vereisten

Voordat we uitleggen hoe je de lijsten kunt aanpassen, moet je er eerst voor zorgen dat Font Awesome werkt op je website. In sommige thema’s zit dit al verwerkt, maar bij de meeste zal je deze regel code toe moeten voegen aan de header file van je (child) thema binnen de <head> tags:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Of, wat eigenlijk beter is, is de uitleg van Font Awesome zelf gebruiken om het toe te voegen. De bovenstaande code linkt namelijk naar versie 4.7, maar er worden vaak updates uitgebracht. Wil je na een update een van de nieuwe iconen gebruiken, dan zal je eerst bovenstaande regel aan moeten passen naar de juiste versie. Om dit tegen te gaan is het aangeraden om de instructie van Font Awesome op te volgen.

Optie 1 – Met CSS lijsten aanpassen

De eerste mogelijkheid om Font Awesome iconen te gebruiken, is door wat kleine CSS aanpassingen te maken in je thema. Deze manier maakt het helaas niet mogelijk om verschillende iconen in dezelfde lijst te gebruiken, daarvoor kan je optie 2 raadplegen.

Met de CSS manier kan je twee dingen doen: je kunt een class maken met het icoon wat je wilt en deze toepassen op je website waar je wilt, of je kunt in een keer alle lijsten aanpassen.

Bepaalde lijsten aanpassen

Om een enkele lijst aan te passen, kan je een class toevoegen aan je (child) thema’s CSS bestand. Dit doe je met de volgende code:

.jouw-class li:before {
   font-family: 'FontAwesome';
   content: '\f067';
   margin:0 5px 0 -15px;
}

Vervolgens kun je dan een lijst gebruiken met de volgende code:

<ul>
<li class=”jouw-class”>Lijst met een aangepast icoon!</li>
</ul>

Alle lijsten aanpassen

Om in een keer alle lijsten aan te passen, kun je de volgende CSS code gebruiken:

li:before {
   font-family: 'FontAwesome';
   content: '\f067';
   margin:0 5px 0 -15px;
}

Afhankelijk van waar je de CSS precies geplaatst hebt, zal dit meteen kunnen werken. Als je geen veranderingen ziet, dan is het verstandig om de volgende code te proberen:

li:before {
   font-family: 'FontAwesome' !important;
   content: '\f067' !important;
   margin:0 5px 0 -15px !important;
}

Mocht je een ander icoon willen, dan heb je hier een Font Awesome cheatlist waarop alle codes van de iconen te vinden zijn. Je past dan simpelweg de huidige code bij ‘content’ aan naar de code van het icoon dat je wilt!

Optie 2 – Met HTML lijsten aanpassen

Als je makkelijk HTML toegang hebt tot de lijsten die je wilt aanpassen, dan is deze optie aanbevolen. Hierbij pas je simpelweg de huidige HTML van je lijst aan (door bijvoorbeeld tijdens het bewerken van je bericht naar de HTML weergave te gaan) met de volgende code:

<ul class="fa-ul">
   <li><i class="fa-li fa fa-check-square"></i>Hierin zet je dan</li>
   <li><i class="fa-li fa fa-check-square"></i>de tekst van je </li>
   <li><i class="fa-li fa fa-check-square"></i>oorspronkelijke lijst</li>
</ul>

Als je nu je bericht opslaat, zal je zien dat je niet langer de standaard bolletjes gebruikt maar juist een vierkantje met een vinkje!

Lijst voorbeeld

Hieronder zie je hoe zo’n lijst er uit kan komen te zien. Zoals je ziet kan je veel vrijheid hebben, omdat verschillende iconen in dezelfde lijst ook mogelijk zijn!

  • Andere lijst iconen
  • Beter dan de standaard bolletjes toch?
  • Zelfs draaiende iconen kan je gebruiken
  • Dus: mooiere lijsten op je WordPress Website!

Michel Kraaijeveld is oprichter van WPsitemaken. Hij is ervan overtuigd dat het voor iedereen mogelijk moet zijn om een eigen website te maken, zonder lastige handleidingen door te hoeven nemen. Zelf is hij al 6 jaar actief met WordPress en probeert zijn kennis op een simpele manier over te brengen aan anderen.

5 reacties

Laat een reactie achter