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 ;)
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>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>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.
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>
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;
}]]></b:skin>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;fill: #e8b960;/* --- Couleur de l'icône Hellocoton --- */
.hello-icon .hc {
fill: #e8b960; /* Couleur de l'icône */
}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 */
}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à ! ;)
