Comment styliser les bullet point dans Webflow ?

Pourquoi personnaliser les bullet points ?

Les listes désordonnées, aussi appelées liste à puces n’offrent pas d’option de personnalisation. Afin de parfaire le branding et d'appliquer la charte graphique dans les détails vous aller devoir personnaliser les liste à puces de votre site ou blog. Pour créer une tonalité légère voire fun avec des emojis. Certain textes ont parfois besoin d'être stylisés pour renforcer la compréhension du contenu avec des symboles plus évocateurs et plus précis.

Comment modifier les bullet points ?

Pour personnaliser une liste, deux options sont possibles :

1. Modifier la couleur
2. Remplacer les puces par un autre symbole

Pour modifier les bullet points des articles d'un blog, il faut ajouter le code ci-dessous :

 <style>
ul {
  list-style: none;
}

ul li::before {
  content: "\2022";
  color: #617fd8;
  display: inline-block;
  margin-left: -1em;
}
</style>

Ce code CSS se compose ainsi :

• list-style: none; : supprime le style par défaut de Webflow
• ul li::before : ce sélecteur cible les éléments <li> à l'intérieur des listes <ul>
• content: " "; : définit le contenu inséré avant chaque élément de liste

Ensuite, vous pouvez ajouter les éléments de style CSS pour peaufiner vos bullets points : couleur, position, etc.

J'ai laissé le caractère Uniccode du bullet point : "\2022". L'aspect graphique de la puce est variable suivant la font utilisée.

Remplacer des bullet points par des symboles ou des emojis

Si jouer avec la couleur et certaines propriétés ne répond pas entièrement à la demande du client, alors on peut remplacer la puce par un autre symbole ou un emojis.

Pour retrouver tous les symboles et tous les emojis il suffit d'aller sur Symbl. Retrouver des Emojis, des flèches, des étoiles, des alphabets, symboles.... inspirant catalogue.

Pour chaque élément, il y a un aperçu selon le navigateur, plateforme ou device. Toutes les Information techniques sont facilement accessibles : il suffit alors de copier le code CSS pour renseigner content " ".

Si le navigateur Mozilla ne prend pas en compte un emoji alors il est remplacé par la puce de base.