Modifier l’icône des puces avec CSS : une personnalisation simple et esthétique

Pour apporter une touche unique à vos listes dans un site web, remplacer l’icône par défaut des puces est une solution élégante. Grâce au code suivant, vous pouvez personnaliser vos listes en utilisant une image ou une icône spécifique.

Exemple de code CSS :

.bullet ul li::before {
  content: url('/wp-content/uploads/2023/02/fleche-pointant-vers-la-droite-1.png');
  display: inline-block;
  color: #8b0000;
  margin-right: 7px;
  margin-left: -30px;
  padding-right: 5px;
  font-size: 1.2em;
  vertical-align: middle;
}

Décryptage du code :

1. content : Ce paramètre insère une image à la place des puces standard. Ici, l’URL de l’image correspond à une flèche (fleche-pointant-vers-la-droite-1.png) hébergée dans le dossier wp-content/uploads.
2. display: inline-block : Permet de traiter l’icône comme un élément en ligne tout en lui appliquant des dimensions ou des marges.
3. Personnalisation des marges et alignement :
   • margin-right: 7px : Éloigne l’icône du texte de la liste.
   • margin-left: -30px : Déplace l’icône vers la gauche pour mieux aligner le tout avec le reste de la liste.
   • padding-right: 5px : Ajoute un espace supplémentaire entre l’icône et le texte.
   • vertical-align: middle : Aligne l’icône au centre verticalement par rapport au texte.
4. font-size et color : Bien que color et font-size soient inutiles ici pour une image, ils peuvent être utiles si l’on remplace content par des symboles typographiques.

Résultat attendu :

Les listes de classe .bullet auront une flèche rouge personnalisée à gauche de chaque élément, offrant une présentation visuelle moderne et professionnelle.

Ce type de personnalisation permet de renforcer l’identité visuelle de votre site web tout en améliorant l’expérience utilisateur. Adoptez cette approche pour dynamiser vos contenus !