Zo maak je icoontjes van je opsommingstekens

Stap 1: Kies het gewenste icoontje

Je kunt kiezen uit alle standaard icoontjes van Elegant Themes, de maker van DIVI. Deze vind je hier.

Scroll naar beneden naar het overzicht van de icoontjes met de bijbehorende code en zoek de code op van het door jouw gewenste icoontje:

Onthoud wat er áchter de x staat. Voor het V-tje is dit bijvoorbeeld 4e.

Stap 2: Ga vanuit je Dashboard naar de Divi Thema Opties

Vul daar bij Aangepaste CSS de volgende CSS code:

/*CUSTOM OPSOMMINGSTEKENS*/
.custom_opsomming ul li {
  padding-left: 20px;  /*buffer links van je opsomming om ruimte te creëren voor icoon*/
  list-style:none;
  margin-bottom: 10px;  /*afstand tussen de opsommingsregels*/
}

.custom_opsomming ul li::before {
  content: '';
  display: inline-block;
  margin-left: -40px;   /*inspringafstand volgende regel*/
  padding-right: 10px;   /*buffer rechts van je icoontje*/
  font-family:'ETmodules';
  color: #f470c5;   
  font-size: 1.2em;   /*formaat icoontje uit te drukken in em*/
  vertical-align: middle;
}

.custom_opsomming_icoon ul li::before {
  content: '\4e';   /*alleen vullen wat na de x staat*/
}

Pas bij color: #f7503d; de kleurcode aan naar jouw gewenste kleur.

Vul bij content: ‘\4e‘; in plaats van 4e de code van jóuw gewenste icoontje (let op: alleen de code die áchter de x staat).

Stap 3: Ga naar de module waarin je de opsommingstekens wilt toevoegen

Vul daar in de module instellingen bij het tabblad Geavanceerd onder CSS klasse:

custom_opsomming custom_opsomming_icoon

Stap 4: Sla op en bewonder!

Tweak eventueel nog wat met de paddings, marges en font-size in de CSS code om hem helemaal naar wens te krijgen!

Leuk toch? 😃

En wil je het op meerdere plekken in je website toepassen? Vul dan alleen nog de CSS klasse in de gewenste module!

Laat het me vooral weten in de reacties als je vragen hebt!