Les icônes de Twenty Thirteen : Genericons

Twenty Thirteen et Genericons

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.

Twenty Thirteen et Genericons : le site de Genericons
Les Genericons disponibles
Elles sont incluses dans un fichier de police de caractères, tout comme les Web Fonts que nous avons déjà vues.

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 :

Twenty Thirteen et Genericons : un exemple
Un exemple
Ici, c’est l’icône genericon-mail qui est affichée, il suffit de remplacer la classe CSS par celle trouvée sur le site de Genericons.

Twenty Thirteen et Genericons : gros plan sur une icône
Gros plan sur une icône
Notez bien que par défaut, l’éditeur de WordPress retire les balises vides en mode visuel, alors pour éviter de perdre toutes les icônes au moindre changement d’onglet, il est obligatoire d’ajouter un espace, qui n’aura aucun effet sur le résultat, entre <span> et </span>.

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 :

Twenty Thirteen et Genericons : différentes tailles
Les tailles définies ici

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 :

Twenty Thirteen et Genericons : l'effet Double appliqué à l'icône
L’effet Double appliqué à l’icône

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.

Cet article vous a été utile ? Partage it !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.