Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Une icône Hellocoton personnalisable

Je vous ai déjà expliqué comment créer des icônes vers vos pages sur les réseaux sociaux pour votre menu. Dans ce tutoriel on utilise une police spéciale FontAwesome dont les caractères sont remplacés par des icônes. Oui, c'est carrément génial ! Plus besoin d'utiliser des images pour ajouter des icônes à son site ! On peut facilement modifier leur couleur et leur taille pour s'accorder à notre blog.

L’inconvénient, c'est que malgré une très large gamme d'icônes proposés, certains réseaux sociaux moins connus internationalement parlant ne sont pas disponibles. Je pense en particulier à Hellocoton qui est devenu au fil des années une référence des blogs féminins francophones.

Alors comment faire pour ajouter une icône pour ce réseau social alors qu'il n'existe pas sur FontAwesome ?

On pourrait utiliser des images, mais ce serait vraiment dommage de mélanger les icônes d'une police et une image qui sera dans tous les cas de moins bonne qualité :/
On pourrait proposer aux créateurs des polices d'icônes de créer une icône pour notre réseau social favori, mais pas sûr que la demande soit assez forte pour qu'ils en viennent réellement à la créer.

Existe-t-il une autre solution alors ?

Eh bien oui ! On peut créer notre propre icône, personnalisable avec du CSS, un peu comme les icônes de FontAwesome, et on pourrait facilement l'ajouter à nos icônes existantes ! Pour cela on peut utiliser un format spécial utilisé majoritairement pour les icônes que l'on nomme SVG.

Qu'est-ce qu'un SVG ?

Un SVG ou Scalable Vector Graphic en anglais, est comme son nom l'indique un graphique vectoriel adaptable. C'est-à-dire que l'on peut modifier la taille du graphique sans en perdre la qualité !
Bref, je ne vais pas entrer dans les détails. Si vous voulez en savoir plus, vous pouvez jeter un coup d’œil à cet article d'Alsacréations ;)

Une icône SVG pour Hellocoton

Comme j'ai déjà créé cette icône, je vais simplement la partager avec vous et vous expliquer comment l'ajouter à votre blog et la personnaliser ;)

Une icône Hellocoton personnalisable
  1. Le code de l'icône
  2. Comment l'utiliser
  3. Modifier l'apparence de l'icône
    1. Faire une sauvegarde de son thème
    2. Où coller les codes CSS
    3. La taille de l'icône
    4. La couleur de l'icône
    5. La couleur de l'icône au survol

Le code de l'icône

Voici le code de notre icône Hellocoton :
<span class="hello-icon"><svg viewBox="0 0 65.333 63.5" xmlns="https://www.w3.org/2000/svg"><path class="hc" d="M31.65,32.519c0,0-12.85-5.253-12.099-19.012C20.301-0.254,31.217,0.4,32.226,0.4 c1.007,0,13.105,0.437,13.105,15.415C45.331,15.815,20.992,14.947,31.65,32.519z" display="inline"></path><path class="hc" d="M33.465,30.971c0,0,1.657-13.78,15.124-16.704c13.466-2.926,15.73,7.773,15.997,8.747 c0.267,0.971,3.11,11.79-11.332,15.76C53.254,38.773,47.581,16.036,33.465,30.971z" display="inline"></path><path class="hc" d="M35.646,32.688c0,0,13.553-3.002,20.771,8.736c7.221,11.738-2.126,17.417-2.953,17.991 c-0.829,0.574-10.693,7.308-19.224-5.005C34.241,54.41,54.414,41.06,35.646,32.688z" display="inline"></path><path class="hc" d="M34.104,34.846c0,0,7.272,11.822-1.454,22.487C23.925,68,15.497,61.028,14.683,60.435 c-0.814-0.596-10.597-7.759-1.756-19.852C12.927,40.583,32.338,55.321,34.104,34.846z" display="inline"></path><path class="hc" d="M31.308,35.39c0,0-9.585,10.039-22.119,4.311c-12.531-5.727-7.933-15.649-7.565-16.588 c0.369-0.938,4.763-11.912,18.704-6.438C20.327,16.674,11.057,38.887,31.308,35.39z" display="inline"></path><path class="hc" d="M64.586,23.014c-0.267-0.974-2.531-11.673-15.997-8.747c-1.181,0.257-2.266,0.601-3.271,1.007 C45.023,0.836,33.22,0.4,32.226,0.4c-1.009,0-11.925-0.654-12.674,13.106c-0.056,1.016-0.029,1.979,0.054,2.904 C6.239,11.596,1.985,22.19,1.623,23.112C1.256,24.051-3.343,33.974,9.188,39.7c1.195,0.546,2.363,0.947,3.498,1.229 c-8.4,11.881,1.189,18.915,1.996,19.505c0.814,0.594,9.242,7.565,17.967-3.102c0.71-0.867,1.304-1.742,1.814-2.618 c8.479,11.881,18.179,5.27,19.001,4.7c0.827-0.574,10.174-6.253,2.953-17.991c-0.681-1.106-1.418-2.082-2.194-2.941 C67.556,34.303,64.847,23.962,64.586,23.014z M34.883,53.959c5.04-9.638-0.779-19.113-0.779-19.113 c-1.549,17.958-16.668,8.831-20.362,6.314c10.229,1.914,17.566-5.771,17.566-5.771C14.133,38.355,18.19,22.834,19.82,18.049 c1.855,10.386,11.83,14.47,11.83,14.47c-9.188-15.147,7.619-16.591,12.436-16.7c-9.351,4.593-10.621,15.152-10.621,15.152 c11.642-12.316,17.536,0.979,19.247,6.023c-7.359-6.454-17.065-4.307-17.065-4.307C52.37,40.148,38.173,51.562,34.883,53.959z"></path></svg></span>
Oui, ça à l'air assez incompréhensible, mais ce charabia donne au final cette jolie icône :

Comment l'utiliser ?

Si vous avez créé votre liste d'icônes en suivant mon tutoriel, alors il suffit d'utiliser la même méthode que celle expliquée dans le tutoriel. On utilise le code HTML d'un lien :
<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html">Texte du Lien</a></li>
En remplaçant le Texte du Lien par le code de l'icône Hellocoton donné ci-dessus.
N'oubliez pas de remplacer Titre par Hellocoton et l'adresse url du lien par celle de votre page Hellocoton ;)

Ce qui donne :
<li><a title="Hellocoton" href="http://www.hellocoton.fr/mapage/ladybirdred"><span class="hello-icon"><svg viewBox="0 0 65.333 63.5" xmlns="https://www.w3.org/2000/svg"><path class="hc" d="M31.65,32.519c0,0-12.85-5.253-12.099-19.012C20.301-0.254,31.217,0.4,32.226,0.4 c1.007,0,13.105,0.437,13.105,15.415C45.331,15.815,20.992,14.947,31.65,32.519z" display="inline"></path><path class="hc" d="M33.465,30.971c0,0,1.657-13.78,15.124-16.704c13.466-2.926,15.73,7.773,15.997,8.747 c0.267,0.971,3.11,11.79-11.332,15.76C53.254,38.773,47.581,16.036,33.465,30.971z" display="inline"></path><path class="hc" d="M35.646,32.688c0,0,13.553-3.002,20.771,8.736c7.221,11.738-2.126,17.417-2.953,17.991 c-0.829,0.574-10.693,7.308-19.224-5.005C34.241,54.41,54.414,41.06,35.646,32.688z" display="inline"></path><path class="hc" d="M34.104,34.846c0,0,7.272,11.822-1.454,22.487C23.925,68,15.497,61.028,14.683,60.435 c-0.814-0.596-10.597-7.759-1.756-19.852C12.927,40.583,32.338,55.321,34.104,34.846z" display="inline"></path><path class="hc" d="M31.308,35.39c0,0-9.585,10.039-22.119,4.311c-12.531-5.727-7.933-15.649-7.565-16.588 c0.369-0.938,4.763-11.912,18.704-6.438C20.327,16.674,11.057,38.887,31.308,35.39z" display="inline"></path><path class="hc" d="M64.586,23.014c-0.267-0.974-2.531-11.673-15.997-8.747c-1.181,0.257-2.266,0.601-3.271,1.007 C45.023,0.836,33.22,0.4,32.226,0.4c-1.009,0-11.925-0.654-12.674,13.106c-0.056,1.016-0.029,1.979,0.054,2.904 C6.239,11.596,1.985,22.19,1.623,23.112C1.256,24.051-3.343,33.974,9.188,39.7c1.195,0.546,2.363,0.947,3.498,1.229 c-8.4,11.881,1.189,18.915,1.996,19.505c0.814,0.594,9.242,7.565,17.967-3.102c0.71-0.867,1.304-1.742,1.814-2.618 c8.479,11.881,18.179,5.27,19.001,4.7c0.827-0.574,10.174-6.253,2.953-17.991c-0.681-1.106-1.418-2.082-2.194-2.941 C67.556,34.303,64.847,23.962,64.586,23.014z M34.883,53.959c5.04-9.638-0.779-19.113-0.779-19.113 c-1.549,17.958-16.668,8.831-20.362,6.314c10.229,1.914,17.566-5.771,17.566-5.771C14.133,38.355,18.19,22.834,19.82,18.049 c1.855,10.386,11.83,14.47,11.83,14.47c-9.188-15.147,7.619-16.591,12.436-16.7c-9.351,4.593-10.621,15.152-10.621,15.152 c11.642-12.316,17.536,0.979,19.247,6.023c-7.359-6.454-17.065-4.307-17.065-4.307C52.37,40.148,38.173,51.562,34.883,53.959z"></path></svg></span></a></li>

Modifier l'apparence de l'icône

Maintenant que vous avez ajouté le code de votre icône, il faut ajouter des codes CSS pour définir sa taille, sa couleur, et sa couleur au survol.

Faire une sauvegarde de son thème

Avant d'aller plus loin, faites une sauvegarde de votre thème ! Si vous faites une erreur vous pourrez facilement revenir en arrière ;)

Cliquez sur Modèle à partir de votre tableau de bord et cliquez sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez sur Télécharger le modèle complet pour faire une sauvegarde de votre thème.

Une icône Hellocoton personnalisable

Vous pourrez maintenant facilement revenir en arrière si vous faites une erreur en cliquant sur Choisissez un fichier et en sélectionnant ce fichier.

Où coller les codes CSS

Cliquez maintenant sur Modifier le code HTML. Cliquez n'importe où à l'intérieur de la boîte de code, puis appuyez sur Ctrl et F en même temps (Cmd et F sur Mac).
Un champ de recherche doit apparaître en haut à droite à l'intérieur de la boîte de code. S'il apparaît en haut de la page web, recommencez en cliquant bien à l'intérieur de la boîte de code avant de faire Ctrl + F.

Dans la boîte de recherche collez :
]]></b:skin>
Et appuyez sur Entrer.

C'est au-dessus de cette ligne que nous allons coller les codes CSS pour modifier l'apparence de notre icône.

La taille de l'icône

Tout d'abord nous allons définir la taille de notre icône. Celle-ci va dépendre de la taille de vos icônes existantes, il faudra donc ajuster la valeur pour votre menu.

Collez :
/* --- Contenant de l'icône Hellocoton --- */
.hello-icon {
    display: inline-block;
    position: relative;
    width: 14px;   /* Largeur de l'icône */
    height: 14px;   /* Hauteur de l'icône */
    top: 1px;
}
Avant la ligne :
]]></b:skin>
Remplacez les 2 valeurs de 14px dans le code ci-dessus pour correspondre à la taille souhaitée.

La couleur de l'icône

Contrairement aux polices, la couleur des SVG ne se définit pas avec le code :
color: #e8b960;
Mais avec ce code :
fill: #e8b960;
Collez donc le code CSS suivant :
/* --- Couleur de l'icône Hellocoton --- */
.hello-icon .hc {
    fill: #e8b960;   /* Couleur de l'icône */
}
A la suite du code CSS précédent.
Remplacez le code couleur #e8b960 par celui de votre choix.
Vous pouvez utiliser le site code-couleur.com pour trouver le code d'une couleur.

La couleur de l'icône au survol

Pour modifier la couleur de l'icône au survol de la souris, collez le code CSS suivant :
/* --- Couleur de l'icône Hellocoton au survol --- */
.hello-icon:hover .hc {
    fill: #2a3848;   /* Couleur de l'icône */
}
A la suite du précédent code CSS.
Remplacez le code couleur par celui de votre choix.

Sauvegardez votre thème en cliquant sur le bouton enregistrer en haut de la page. Et voilà ! ;)

Autres articles

15 commentaires:

  1. Hello Catherine,

    Enfin l'icône tant convoité lol, merci à toi pour ce tuto :)
    J'ai tout réussi sauf qu'il ne s'aligne pas avec pas les autres :/

    je te laisse mon blog si tu peux y jeter un oeil, www.mamasycabeaute.com

    Merci à toi.
    Bizz
    Jessica

    RépondreSupprimer
  2. re, ben j'ai réussi en modifiant la valeur "top"! désolé du dérangement.
    Jessica

    RépondreSupprimer
  3. bon ben la 3ème sera peut être la bonne, mon icône est ok mais après coup je vois que ça m'a descendu toute la ligne sous ma bannière, alors que celle-ci était pile à la fin de la bannière (alligné à "recherche"), mais là je ne sais pas quoi modifier, je laisse le temps que tu puisses voir, merci et re désolé pour ces coms !

    Bizz
    Jessica

    RépondreSupprimer
    Réponses
    1. Bonjour Jessica,
      Retrouve ton code CSS :

      /* --- Contenant de l'icône Hellocoton --- */
      .hello-icon {
      display: block;
      position: relative;
      width: 20px; /* Largeur de l'icône */
      height: 20px; /* Hauteur de l'icône */
      top: 21px;
      }

      Remplace la première ligne :

      display: block;

      Par :

      display: inline-block;

      Et la dernière :

      top: 21px;

      Par :

      top: 1px;

      Et voilà ;)

      Supprimer
    2. Hello Catherine,

      Comme toujours tu me sauves ;) Merci à toi, ça fonctionne nikel.

      Bon week end, bizzzzzzzz
      Jessica

      Supprimer
  4. Bonjour,

    j'ai bien réussi à mettre en place l'icone (encore merci pour ce tuto :) ), mais j'ai un petit soucis en bas de chaque article, au niveau de ma présentation. On retrouve à cet endroit les mêmes icônes qu'en haut du blog. Du coup, l'icone hellocoton prend les couleurs du CSS. Je me demandais si il était possible de changer ça ? De pouvoir récupérer la même couleur que les autres icônes ? En fait, au niveau de ma présentation d'auteur, le template reprend le même widget qu'en au du blog. Enfin, il me semble.

    Exemple sur cet article : http://mllesonata.blogspot.fr/2017/02/les-temples-a-tokyo.html

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu peux modifier l'apparence de l'icône dans ta présentation en bas d'article en ajoutant des codes CSS pour cliber cet icône.
      Ajoutes .author-social avant les nouveaux codes CSS pour cet icône. .author-social cible les icônes de ta présentation. Les codes CSS seront donc :

      .author-social .hello-icon {
      }

      .author-social .hello-icon .hc {
      }

      .author-social .hello-icon:hover .hc {
      }

      Supprimer
  5. Bonjour, est-ce qu'on peut remplacer Hellocoton par Facebook ? J'ai essayé mais je n'arrive pas à mettre le logo Facebook et Instagram au même niveau que vous (tout en haut à droite. Comment faire ? Merci :)

    RépondreSupprimer
    Réponses
    1. Bonjour Céleste,
      Tu peux ajouter cette icône à ta liste d'icônes existantes. Remplaces le code de l'icône fontAwesome par le code de l'icône Hellocoton ;)
      Pour mettre les liens en haut de page, j'ai fixé mon menu en haut du blog. Celui-ci prend 100% de la largeur de la page ce qui permet de séparer le menu en 2 parties (liens à gauche et icônes à droite).

      Supprimer
  6. bonjour,

    est ce que vous pouvez m'aider s'il vous plaît ? j'ai fais ce qu'il fallait mais mon logo apparaît en bas avec son écriture loin et plus haut encore, je fais pour que vous puissiez voir,

    si vous pouvez m'aider ça serait génial ! merci d'avance Xx

    RépondreSupprimer
    Réponses
    1. Bonjour,
      A quel endroit as-tu ce problème de décalage ? J'ai regardé ton blog mais ne le voit pas :/

      Supprimer
  7. Salut !
    Avant tout merci pour tous tes précieux conseils :)
    J'ai une question : j'ai créé un gadget hellocoton en me servant du code htlm fourni par hellocoton cependant l'image du gadget est positionné à gauche. j'aimerais changer sa position et le centrer. j'ai tout essayé mais impossible de modifier sa position. j'arrive seulement à changer la position du texte qui se trouve en dessous de l'image.
    Quelques pistes de réflexions seraient les bienvenus!
    Merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour Charlie,
      As-tu une page avec ce gadget ? Pour que je puisses y jeter un œil ;)

      Supprimer
    2. Bonjour Catherine :)

      Merci de ta réponse

      Voici le lien de ma page : http://www.laboutonneuse.com/

      Supprimer
    3. Bonjour Charlie,
      Je ne vois pas ton gadget Hellocoton :/

      Supprimer

Vérifiez d'abord que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Je modère les commentaires 1 fois par semaine, mais je ne vous oublie pas ! :)

Newsletter

Tu veux recevoirinfos exclusives, news et ressourcesdans ta boîte mail ?
Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger