Le défi de l'alignement des icônes avec le texte dans les listes est qu'une fois que le texte dépasse une ligne, l'icône centrée visuellement peut paraître décalée. L'approche initiale consistant à utiliser align-items: start dans Flexbox déplace l'icône au sommet du conteneur, ce qui n'est pas idéal en raison de l'espace de ligne par défaut.
Pour résoudre ce problème lorsque l'icône est un élément HTML, il est recommandé d'ajuster la position verticale de l'icône. L'utilisation d'une valeur fixe avec transform: translateY() s'avère instable lorsque la taille de la police, la taille de l'icône ou la largeur du conteneur changent. La solution la plus robuste consiste à utiliser l'unité lh (line-height) pour calculer un décalage dynamique, assurant ainsi un alignement constant quelle que soit la taille du texte ou de l'icône.
Lorsque l'icône est ajoutée via un pseudo-élément comme image de fond, le même principe de calcul d'un décalage relatif s'applique pour garantir un alignement cohérent avec la première ligne de texte, même lorsque le texte se prolonge sur plusieurs lignes.
Symfony UX Icons révolutionne la gestion des icônes dans Symfony en intégrant plus de 200 000 icônes SVG via Iconify, sans CDN, sans sprite et sans configuration complexe. Ce composant télécharge les icônes localement, les met en cache et les injecte directement dans le HTML, optimisant ainsi les performances et la maintenabilité. Avec une simple ligne de code Twig, vous pouvez utiliser des icônes de diverses collections comme Tabler, Lucide ou Material Design Icons. Installation via Composer et usage immédiat sans configuration supplémentaire.
Tout est dans le titre
<span class="nav-toggle"> ☰ Menu </span> est mauvais pour l'accessibilité. L'auteur explique comment résoudre ces problèmes
Tout est dans le titre
Tout est dans le titre (via https://happytodev.substack.com/p/quoi-de-neuf-les-devs-numero-110 )
Après une présentation des avantages des design systems basé sur le "Atomic Design" de Brad Frost, l'auteur donne des conseils sur le cas particulier des icones.
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Une grosse liste d'outils front : CSS, JS, icônes, etc.
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Une bibliothèque d'icônes CSS - on peut voir en plus en détail comment chaque icône est construite
Tout est dans le titre
Des icônes gratuites.. en intégrées au template https://tabler.io/
Tout est dans le titre
Un ensemble d'icônes intégrées dans Vue.js
Plein de liens intéressants (notamment des ressources en icônes)