Hoe gebruik je icons als bullets in lijsten met GenerateBlocks?

Lijsten worden standaard weergegeven met bullet points. In plaats van de standaard opsommingstekens kun je ook andere tekens gebruiken en zelfs pictogrammen zoals SVG icons.

Lijsten met icons met GenerateBlocks

Een standaard opsommingslijstje is wat saai:

• Zo ziet een lijst er standaard uit.
• Gemaakt met de core Gutenberg Lijst block.
• En een bullet point als opsommingsteken.

In plaats van de standaard opsommingstekens kun je ook een pictogram (SVG icon) gebruiken.

In GenerateBlocks kun je de Headline block gebruiken om een SVG icon aan een headline toe te voegen. Optisch lijkt dat dan al ok, maar als je semantische html en accessibility (digitale toegankelijkheid) belangrijk vind, moet je nog wel wat extra’s doen. Dat kan ook met GenerateBlocks, maar is wel bewerkelijk.

Een eenvoudigere optie is om de core Gutenberg list block te gebruiken met icons. Met wat CSS kun je zo elke SVG icon gebruiken op je website. En het is:

• Semantische HTML
• Accessible

Hoe voeg ik een icon als opsommingstekens in een lijst toe?

Met wat custom CSS kun je namelijk eenvoudig SVG icons als opsommingstekens in ongeordende lijsten gebruiken. Nadat je de custom CSS hebt toegevoegd, kun je ze laten toepassen op de lijsten door in de core Gutenberg lijst block de extra CSS-class(es) onder Geavanceerd toe te voegen.

Dit is de custom CSS voor icons als opsommingstekens:

 /* Verwijder de standaard opsommingsteken  */
ul.c-iconlist {
  list-style-type: none;
}

/* Style list items, maak wat ruimte voor de pictogram */
ul.c-iconlist li {
  position: relative;
  padding-left: 2rem;
}

/* Voeg je icon toe als pseudo-element */
ul.c-iconlist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
	background-repeat: no-repeat;
  background-color: currentColor;
 mask: url("data:image/svg+xml;base64, BASE64_ENCODED_SVG_HERE");
}

Bovenstaande CSS is eenvoudig aan te passen. Om een pictogram te gebruiken, moet je het eerst wel toevoegen aan de mask-regel.

Begin eerst door jouw SVG icon om te zetten naar Base64:

1. Kopieer de HTML van je SVG (open het .svg-bestand in een code/teksteditor om de HTML te bekijken).
2. Ga naar een SVG encoder/converter tool en plak daar je SVG code. Kopieer de Base64 Encoded en plak dat in een code/tekst editor.
3. Je hebt namelijk niet alles nodig, maar moet het stukje tussen de aanhalingstekens kopieren.
4. Ga dan naar de CSS met mask en plak het daar tussen de aanhalingstekens in.

 mask: url("data:image/svg+xml;base64, BASE64_ENCODED_SVG_HERE");

En eventueel kun je de kleur van de pictogram aanpassen door ‘currentColor’ te vervangen door jouw kleur.

Wat als ik op elke regel een andere pictogram wil gebruiken?

De CSS gebruikt op elke regel dezelfde pictogram. Maar wat als je op elke regel een andere pictogram wilt gebruiken? Dat kan ook met CSS. Met behulp van de nth-child pseudo-klasse kun je een andere pictogram gebruiken voor elke lijstitem. Je kunt zoveel nth-child selectors toevoegen als je nodig hebt, elk met een ander base64-gecodeerd SVG-icon.

Hier een voorbeeld hoe je bovenstaande CSS kan aanpassen voor vier verschillende pictogrammen:

ul.c-iconlist {
  list-style-type: none;
}

ul.c-iconlist li {
  position: relative;
  padding-left: 2rem;
}

ul.c-iconlist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  background-repeat: no-repeat;
  background-color: currentColor;
}

/* Een verschillende pictogram per lijstitem. Voeg tussen de aanhalingstekens base64-gecodeerd SVG-icon toe. */
ul.c-iconlist li:nth-child(1)::before {
  mask: url("data:image/svg+xml;base64, BASE64_ENCODED_SVG_HERE");
}

ul.c-iconlist li:nth-child(2)::before {
  mask: url("data:image/svg+xml;base64, BASE64_ENCODED_SVG_HERE");
}

/* voeg meer nth-child selectors toe voor extra list items */

Je kan natuurlijk ook meerdere CSS-klasses maken voor verschillende soorten opsommingen. Zo kun je dus bijvoorbeeld een opsomming van nadelen een andere pictogram geven dan de opsomming van de voordelen.

De nadelen:

• Het is wat meer werk.
• Je moet wat custom CSS toevoegen.

De voordelen:

• Het maakt het overzichtelijker.
• Het ziet er mooi uit!

Al met al, niet zo heel ingewikkeld. En het maakt je opsommingen overzichtelijker en fraaier.

SVG icons als opsommingstekens gebruiken