Donnez du style à votre blog WordPress avec Bootstrap Awesome

Donnez du style à votre blog WordPress avec Bootstrap Awesome

Nous avions déjà vu la librairie d’icônes Genericons, livrée avec le thème de WordPress TwentyThirteen, mais aussi TwentyFourteen.

Voyons cette fois la librairie d’icônes, toujours sous forme de police de caractères, Bootstrap Awesome.

Awesome ?

Comme Genericons, la librairie d’icônes Bootstrap Awesome est une police de caractères et permet d’afficher des icônes plus ou moins grandes, sans perte de qualité, dans la couleur du texte en cours.

Etroitement liée à Twitter Bootstrap, cette librairie fournit des fonctionnalités intéressantes :

  • définition de la taille avec des classes CSS préféfinies, par exemple fa-2x permet de doubler les dimensions par défaut de l’icône
  • remplace les puces facilement dans les listes avec les classes fa-ul et fa-li
  • ajout de bordure à l’icône avec fa-border, pour lui donner un look de bouton de barre d’outil par exemple
  • l’animation ! Il est possible de faire tourner l’icône sur elle-même en ajoutant une simple classe fa-spin, pour simuler un bouton de chargement par exemple
  • la rotation, à 90, 180 ou 270 degrès, ou en effet miroir
  • la création d’icônes empilées en combinant une icône de base (par exemple une bordure ronde ou un carré plein) avec l’une des icônes de la librairie, et toujours en CSS !

Tout est expliqué sur la page d’exemple du site officiel.

Donnez du style à votre blog WordPress avec Bootstrap Awesome : quelques exemples
Les exemples sont accompagnés du code correspondant

Installation

Le mieux est de travailler dans un thème enfant.

Téléchargez l’archive qui contient la librairie depuis le site d’Awesome, et décompressez la dans un nouveau dossier nommé awesome dans le dossier css de votre thème enfant. Ce dossier awesome doit contenir deux dossiers : fonts et css.

Ensuite modifiez le fichier functions.php pour y ajouter l’inclusion du fichier CSS :

function enqueueAwesomeStyle() {
  wp_enqueue_style("awesome", get_stylesheet_directory_uri() . "/css/awesome/css/font-awesome.min.css");
}
add_action("wp_enqueue_scripts", "enqueueAwesomeStyle");

Vous êtes maintenant prêt à ajouter de jolies icônes sur votre site.

Utilisation

Vous pouvez utiliser les icônes directement dans le thème, mais aussi dans les articles et les pages de votre blog.

La première chose à faire est de choisir l’icône sur la page dédiée, ce qui est, vu le choix, la tache la moins facile :

Donnez du style à votre blog WordPress avec Bootstrap Awesome : les icônes
Quelques unes des 369 icônes
Une fois sélectionnée, le code à inséré est visible directement :

Donnez du style à votre blog WordPress avec Bootstrap Awesome : le code d'une icône
Le code d’une icône à insérer
Ici, il s’agit de ce code HTML :

<i class="fa fa-truck"></i>

A ce moment là, vous pouvez encore personnaliser l’icône pour l’afficher en grand avec fa-5x et euh… l’animer pour le faire tourner sur lui-même avec fa-spin :

<i class="fa fa-truck fa-5x fa-spin"></i>

 

Enfin bref…

L’utilisation dans les articles et les pages

Ajouter les icônes dans le code du thème est simple, mais l’utiliser directement dans les pages et les articles nécessite une petite modification de l’éditeur de texte, du moins si vous utilisez l’éditeur par défaut de WordPress.

En effet, l’ajout de balises sans contenu est effacé automatiquement au moment du passage au mode visuel.

Dans mon article sur les Genericons, je vous conseillais d’insérer un espace entre <span> et </span>. Mais cette astuce ne fonctionne plus. Ainsi, la modification suivante est aussi valable pour Genericons.

Cette astuce, que j’ai trouvée après quelques recherches, est à insérer dans le fichier functions.php du thème enfant.

function changeMceOptions($init) {
  $init["extended_valid_elements"] = "i[class]," . $init["extended_valid_elements"];
  return $init;
}
add_filter("tiny_mce_before_init", "changeMceOptions");

Une fois cette modification faite, l’éditeur ne supprime plus les balises <i> vides, et vous pouvez ajouter le code de l’icône dans l’onglet ‘Texte’ de l’éditeur.

Et pour visualiser les icônes d’Awesome dans l’éditeur visuel ?

En effet, le mieux serait de pouvoir voir les icônes directement dans l’éditeur visuel.

Là encore, la manipulation est simple, il suffit d’ajouter ce code PHP toujours à l’endroit habituel :

function addAwesomeToTheEditor() {
  add_editor_style("css/awesome/css/font-awesome.min.css");
}
add_action("init", "addAwesomeToTheEditor");

Et le résultat :

Donnez du style à votre blog WordPress avec Bootstrap Awesome : le résultat dans l'éditeur
L’affichage des icônes Awesome dans l’éditeur de WordPress

Le mot de la fin

Bootstrap Awesome offre une grande diversité dans les icônes et beaucoup de fonctionnalités, mais seul bémol, depuis peu, les icônes ont été renommées pour être descriptives.
Par exemple, l’icône utilisée habituellement pour fermer ne s’appelle pas fa-close, mais fa-times-round, parce qu’elle représente la croix de multiplication, times en anglais. Logique, mais à mon goût c’est moins pratique.

En tout cas, personnellement, il s’agit de ma librairie d’icônes préférée pour le choix proposé mais surtout pour la facilité offerte pour changer leur taille avec les classes fournies.

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

12 réflexions au sujet de « Donnez du style à votre blog WordPress avec Bootstrap Awesome »

  1. Hello David !!

    très intéressante cette fonte ! je pense qu’elle va me faire craquer !
    Par contre, j’aimerai l’utiliser pour mes boutons de partage (oui oui je te copie) mais je n’ai pas vu comment changer la couleur : est ce via CSS, via un code à ajouter dans la balise ou faut il créer ses propres icones de couleur ?

    Tes réponses m’intéressent énormément ! 😉

    1. Bonjour Arnaud,
      Oui, elle est vraiment… awesome 😉
      Pour changer la couleur, il faut passer simplement par CSS. Par exemple :
      Dans le code HTML :
      <i class= »fa fa-truck mon-style »></i>
      Dans le fichier CSS :
      .mon-style {
      color: red;
      }
      Et aussi, toujours parce que c’est du CSS, l’icône hérite de la couleur du parent. Si la couleur du texte d’un paragraphe est rouge, et que l’icône est dans le paragraphe, elle devient automatiquement rouge (sauf mention contraire bien sûr).
      Pour trouver les couleurs des logos des réseaux sociaux, j’étais passé par ce site : http://guidelinecolour.com/
      David

      1. Grand merci David !
        j’avance dans ma réflexion, je pense faire un essai en milieu de semaine en m’aidant de tes indications.
        Cet font est vraiment magique..

        1. Dis-moi quand tu l’auras mise en place, que j’admire le résultat 🙂
          (et n’hésite pas si tu as d’autres questions)
          David

  2. Voilà tu peux aller voir. J’en ai mis:
    – pour mes titres en sidebar
    – pour mes titres en footer
    – pour mon sous titre de site
    – pour tout mon système de partage sociaux !
    – ici et là, quand ça avait du sens.

    C’est vraiment awesome et vachement beau !!
    je te remercie infiniment pour éclairer très intelligemment ce qui fera l’internet de l’an 3000 !

  3. Bonjour,

    Comment pourrait-on utiliser une icone dans un titre de page, comme on le fait pour une image de background? Dans la classe .page-title ou bien ailleurs, dans le script de la page par défaut? sais pas…
    vous oui?

    1. Bonjour Jean-Paul,
      La réponse est oui, en utilisant le pseudo-élément :before de CSS3.

      Pour intégrer une icône à une classe déjà existante, sans ajouter les éléments HTML, par exemple, pour ajouter un camion devant la classe page-title :
      .page-title:before {
      content: « \f0d1 »; /* fa-truck */
      font-family: FontAwesome;
      padding-right: 10px;
      }
      Pour trouver le code correspondant à l’icône, ici \f0d1 pour le camion, il suffit de parcourir le fichier font-awesome.css.
      La taille et la couleur de l’icône s’adaptent automatiquement, mais il est bien sûr possible de les redéfinir dans la classe.

      Je vous conseille d’ajouter un commentaire pour vous y retrouver plus facilement, le code étant un peu moins parlant que le nom de la classe Awesome.

      David

      1. Je dois merder quelque part car le camion n’apparait pas ;o)

        j’ai bien créé /awesome dans lequel j’ai placéles répertoires css et fonts complets.
        Dans la feuille styles.css du thème enfant, j’ai collé la classe .page-title:before
        J’ai créé la fonction enqueueAwesomeStyle() dans le fichier functions.php du thème enfant. A moment donné j’ai pensé que le chemin vers la feuille de style n’était pas bon car le dossier awsome était à la racine du theme-child alors que le chemin de la fonction pointe vers css/awesome
        le html fonctionne par contre : class= »fa fa-truck »

      2. Non désolé mais ça ne fonctionne pas!
        – j’ai créé le functions.php dans le thème enfant
        – le répertoire awesome avec les 2 dossiers.
        – collé ta classe dans la feuille de style du thème enfant
        A priori wp trouve le html mais pas la classe.

        1. Le camion apparaît en l’intégrant directement en HTML avec <i class= »fa fa-truck »></i> mais pas en ajoutant le code dans la classe CSS, c’est bien ça ?

          Tu peux :
          – vérifier dans les sources que le fichier CSS de la classe est bien mis à jour
          – vérifier avec firebug ou l’outil de développement de ton navigateur préféré que tous les fichiers de ressources (Awesome en l’occurrence) sont bien chargés
          – me donner l’adresse de ton site que je jette un oeil, par le formulaire de contact si c’est la version de développement (ou ici, je le modérerai si tu le demandes)

          David

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.