Tuto Generatepress – Ajouter une icone personnalisée sur un bouton

GeneratePress est vraiment un thème génial mais il y a toujours des petites choses manquantes qu’il faut réussir à rajouter. Récemment pour réaliser le site d’un client qui voulait un bouton de lien avec sa chaine youtube avec aucun texte juste une icone, je me suis rendu compte que celle-ci n’existait pas dans la librairie native du thème. D’où l’idée de partager le « comment faire dans ces cas là ».

1.Comment ajouter une icone dans un bouton generatePress.

Tout d’abord choisir le type de boutons « bleus » dans la sélection de blocs et pas l’autre type qui offre moins de personnalisations possibles.

Dans le menu de personnalisation du bloc, ouvrez icon et cliquez sur celle qui va avec le bouton.

2. J’ai besoin d’une icone qui n’existe pas dans la librairie.

Dans ce cas on va sélectionner n’importe quelle icone et copier tout ce qui se trouve dans la zone sous « Icon SVG HTML » et le coller sur un éditeur de code (ou un bloc note qui fera aussi bien l’affaire). Vous devez avoir l’équivalent de ceci :

<svg aria-hidden="true" role="img" height="1em" width="1em" viewbox="0 0 320 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg>

Vous avez récupéré tout le contenu de la balise svg avec la bonne taille et la bonne viewbox pour le code qu’on va coller ensuite.

Ensuite on va chercher le svg de l’icone à rajouter soit sur fontawesome soit sur flaticon

On recherche l’icone qui nous intéresse (oui je sais…mais je n’aurai sans doute jamais l’occasion d’utiliser réellement cette icone alors pour le tuto hein..)

On sélectionne le modèle, forme pleine ou juste contours.

On récupère le fichier SVG

On ouvre le .svg avec le bloc note

Partie un peu fastidieuse, on récupère tout le code vectoriel qui se trouve après d= » et on s’arrête avant le  » pour le coller à la place de ce qui se trouve après le d= » du code récupéré précédemment.

Il ne reste plus qu’à coller la balise svg modifiée dans l’éditeur de bloc !

Besoin d’aide avec votre site wordPress ou generatePress ?

Laisser un commentaire