Zo maak je icoontjes van je opsommingstekens

24 jun 2021 | DESIGN TIP

Marloes met laptop blog
De standaard opsommingstekens zijn een beetje saai vind je niet? Ook kun je ze standaard geen ander kleurtje geven dan de tekst. Met deze tutorial maak je er mooie icoontjes van!
divi-van-opsommingstekens-icoontjes-maken

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!

2 Reacties

  1. Ysbrand

    Geweldig verhaal. Ik werk met het blocksy thema en met elementor. Heb je daar ervaring mee om daar deze aanpassing te doen?

    De css bestanden hebben vermoedelijk andere benamingen dan in het Devi thema.

    Antwoord
    • Marloes

      Haha dank! Ik heb daar helaas geen ervaring mee, dit gaat dan inderdaad anders!

      Antwoord

Een reactie versturen

Het e-mailadres wordt niet gepubliceerd.

Customize lekker verder!

Marloes blij blog

Hoi, ik ben Marloes!

Een enthousiaste webdesigner, gespecialiseerd in het DIVI thema voor WordPress. Mijn tutorials zijn geschreven voor iedereen die de basics van DIVI al kent.

Ken jij die nog niet, maar wil je graag met DIVI aan de slag? Bekijk dan mijn uitgebreide beginners training!