Vous utilisez le thème Twenty Thirteen ? Vous voulez ajoutez des icônes pour mettre en valeur le contenu ?
Il suffit de les inclure grâce à la librairie d’icônes Genericons, livrée avec le thème.
Voyons comment faire.
Pourquoi utiliser Twenty Thirteen ?
Avant d’entrer dans le vif du sujet, j’aimerais apporter quelques précisions à propos du thème Twenty Thirteen, et l’utilisation que j’en ai.
Ce thème, livré avec les versions récentes de WordPress, est extrêmement bien conçu, il respecte les préconisations de WordPress, sur les filtres et les hooks par exemple (encore heureux), est léger, utilise HTML5, offre une navigation bien pensé, est reponsive, …
Vous pouvez le personnaliser facilement en créant un thème enfant et ainsi profiter de sa base solide pour votre site ou votre blog.
Un inconvénient à la création de thème enfant basé sur Twenty Thirteen par rapport aux thèmes premium est qu’il est nécessaire d’avoir de bonnes connaissances en développement Web (HTML, CSS, JavaScript et PHP).
Un exemple : là où un thème premium propose des champs pour indiquer ses adresses de réseaux sociaux pour les afficher à l’endroit adéquat, en personnalisant Twenty Thirteen, il est nécessaire de créer l’espace en HTML et CSS, pour certainement ajouter les logos avec les adresses ‘en dur’.
En plus, cette personnalisation prend du temps, et donc, a un coût, qui pourra être au final moins avantageux que d’acheter un thème premium prêt à être configuré.
Malgré cela, je préfère passer par un thème enfant de Twenty Thirteen pour avoir un site unique et vraiment personnalisé dans les moindres détails.
Et par la même occasion, j’améliore mes compétences en WordPress.
C’est pour cette raison que je vais faire plusieurs articles sur le sujet dans les semaines qui viennent.
Les genericons ?
Les genericons sont un ensemble d’icônes au style moderne.
En plus elles sont livrées avec Twenty Thirteen. Ainsi, pour les cas simples, il n’y a rien d’autre à faire que de les utiliser.
Les avantages des icônes incluses dans une Web font :
- les icônes sont vectorielles, et peuvent être agrandies ou réduites sans perte de qualité ni déformation, toujours en se basant sur le même modèle
- vous pouvez changer la couleur de l’icône en CSS, simplement parce qu’il s’agit de texte. Ainsi, vous n’avez pas besoin d’avoir une version de chaque couleur.
- toujours dans le cadre du CSS, vous pouvez appliquer n’importe quelle transformation : gras, dégradés, bordure, coins arrondis, manipulations de police, …
- toutes les icônes sont dans le même fichier ce qui limite le nombre d’échanges avec le serveur.
- pas besoin non plus de création fastidieuse d’un fichier sprite
Les icônes peuvent être utilisées dans n’importe quel article, page, widget texte, ou contenu personnalisé.
Comment les utiliser ?
Leur utilisation est très simple, il suffit d’inclure un code de ce genre dans l’éditeur texte (pas dans l’éditeur visuel donc) des articles ou des pages :
<span class="genericon genericon-mail"> </span> Contactez-nous ! |
Ce qui donne :
Toujours sur le site de Genericons, vous pouvez cliquer sur le bouton Copy HTML pour récupérer le code HTML à inclure. Ici aussi, n’oubliez pas d’insérer l’espace qui va bien.
Un exemple de personnalisation
La taille
Les icônes sont disponibles en petite taille. Mais avant de pouvoir les utiliser dans d’autres tailles, il est nécessaire d’ajouter quelques classes CSS, dans un thème enfant par exemple.
L’intérêt de ces classes est de changer l’espace alloué, en plus, bien sûr, de la taille.
.genericon-32:before { width: 32px; height: 32px; font: 32px/1 Genericons; } .genericon-48:before { width: 48px; height: 48px; font: 48px/1 Genericons; } .genericon-64:before { width: 64px; height: 64px; font: 64px/1 Genericons; } |
Si vous voulez créer vos propres dimensions, sachez que la taille doit être de préférence un multiple de 16.
Cette autre modification CSS est nécessaire, pour laisser un espace suffisant entre l’icône et le texte qui la suit :
.genericon-32, .genericon-48, .genericon-64 { display: inline; } |
Pour utiliser une taille, il suffit de déclarer la classe supplémentaire :
<p style="color: lightblue; font-size: 42px;"> <span class="genericon genericon-64 genericon-mail"> </span> Contactez-nous ! </p> |
Ce qui donne :
Autres effets CSS
Vous pouvez ajouter d’autres effets, comme ceux du site Best Web Fonts, que nous avons déjà vu.
Par exemple, vous pouvez sélectionner le code de l’effet ‘Double’ pour créer une nouvelle classe :
.font-double-effect { color: #00A0D9; cursor: pointer; text-shadow: 1px 1px 1px #494949; position: relative; } |
Pour l’utiliser :
<p style="color: lightblue; font-size: 42px;"> <span class="genericon genericon-64 genericon-mail font-double-effect"> </span> Contactez-nous ! </p> |
Le résultat :
Le mot de la fin
L’ajout d’icônes avec Twenty Thirteen devient simple grâce à Genericons, même si le changement de taille est tout de même, relativement, fastidieux.
Aussi, la personnalisation grâce aux possibilités offertes par CSS n’a pas vraiment de limite.
Un dernier détail : les icônes sont visualisables directement dans l’éditeur d’articles et de pages.
