Alan Pilloud
Alan Pilloud
Published on: mars 24, 2020

Pour les besoins de notre propre site internet, j’ai développé un nouveau shortcode qui permet d’ajouter des icônes.

Vous pouvez voir un exemple sur notre page de présentation de WordPress. Cela m’a permis de relever visuellement certains points, plus élégamment qu’en utilisant une liste à puce.

J’ai aussi voulu voir comment le combiner avec un bouton pour offrir encore plus de possibilités.

Exemples

Un texte avec une icône sur la gauche
Meme chose, avec une icône de couleur
Un texte avec une icône sur la droite
Un bouton, avec une icône à droite

Une grande icône toute seule.

Près de 300 icônes déjà disponibles !

Nous utilisons le très complet ensemble d’icônes Feather qui comporte à ce jour 282 icônes.
Bien sur, il est possible d’adapter n’importe quel ensemble d’icônes, y compris vos icônes sur-mesure.

Utilisation

Paramètres

  • name : le nom de l’icône à afficher (se référer à la liste Feather).
  • color : une couleur comme #fff, #3bcf98, ou encore var(–primary) si votre thème comprend des couleurs en variables css.
  • inverse : définit à true pour afficher l’icône après le texte.

Le shortcode est utilisable également sans contenu.

Voici un exemple d’utilisation du shortcode avec tous les paramètres disponibles:

[ icon name="arrow-right-circle" inverse="true" color="forestgreen"]Un texte avec une icône sur la droite[/icon]

Ce qui donne :

Un texte avec une icône sur la droite

Dans un bouton

[ btn url="https://..."][ icon name="arrow-right-circle" inverse="true"]bouton d'exemple[/icon][/btn]

Ce qui donne :

bouton d’exemple
Pour nos clients

Mise à disposition gratuite

Pour l’un de vos projets WordPress, nous offrons l’installation de ce nouveau shortcode icon ainsi que le shortcode btn pour les projets les plus anciens.

Prenez contact pour obtenir vos nouveaux shortcodes !

Vous avez aimé ?
Partagez cet article :