WordPress: Comment ajouter des icônes de police géniales à WordPress

WordPress: Comment ajouter des icônes de police géniales à WordPress

Vous voulez ajouter des icônes Font Awesome à ? Les icônes aident à ajouter du style et de la convivialité à votre site . Et parmi les nombreuses collections d’icônes de polices, Font Awesome est l’une des meilleures.

Mais malheureusement, vous ne pouvez pas vous lancer et commencer à utiliser les icônes Font Awesome sur tout de suite. Au lieu de cela, vous devrez effectuer certaines étapes de configuration avant de pouvoir insérer des icônes.


C’est l’objet de ce guide. Lorsque vous aurez fini de lire, vous saurez exactement comment :

  • Ajouter manuellement la feuille de style Font Awesome à
  • Ajoutez Font Awesome à avec un plugin gratuit
  • Insérez et stylisez les icônes Font Awesome de différentes manières

Creusons…

Pourquoi vous devriez prendre le temps d’ajouter des icônes de police impressionnantes à

Les icônes Font Awesome sont géniales car, comme leur nom l’indique, il s’agit d’une police d’icônes plutôt que d’images. Cela signifie que vous pouvez faire des choses sympas comme :

  • Redimensionner sans perdre en qualité car les icônes sont des vecteurs
  • Changez les couleurs, ajoutez une animation et utilisez d’autres manipulations CSS

Tout cela pour dire que les icônes Font Awesome sont de loin supérieures à la simple utilisation d’une image statique.

WordPress: Comment ajouter des icônes de police géniales à WordPress

Tout d’abord, je vais vous montrer deux façons différentes de les ajouter à votre site. Ensuite, je vais vous montrer comment vous pouvez styliser et manipuler vos icônes (peu importe la méthode que vous choisissez).

Comment ajouter manuellement des icônes de police géniales à

Si l’idée de creuser dans le code de votre thème vous fait peur, je vous recommande de passer à la section suivante où je vais vous montrer comment ajouter des icônes Font Awesome à à l’aide d’un plugin gratuit.

Sinon, j’aime cette méthode pour un moyen agréable et léger de faire fonctionner Font Awesome.

Fondamentalement, tout ce que vous avez à faire est d’ajouter la feuille de style Font Awesome à votre thème . Ensuite, vous pouvez commencer à insérer des icônes Font Awesome et à les styliser comme vous le souhaitez.

Voici comment fonctionne l’ensemble du processus, étape par étape :

Étape 1 : mettez en file d’attente la feuille de style géniale de la police dans votre thème

Comme je l’ai dit, votre première étape consiste à ajouter la feuille de style CSS Font Awesome à votre thème . Bien que vous puissiez l’obtenir directement sur le site Web de Font Awesome, ma méthode préférée consiste à utiliser la version hébergée sur Bootstrap CDN.

Actuellement, ce lien est :

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Mais cela changera au fur et à mesure que Font Awesome publiera de nouvelles versions. C’est donc une bonne idée de mettre à jour semi-régulièrement le lien vers la dernière version (bien que les anciennes versions continueront de fonctionner).

Pour ajouter cette feuille de style à , vous devez file d’attente il dans votre thème enfant fichier functions.php. Bien que la méthode de base pour ajouter du CSS consiste à placer le lien dans votre en-tête, il est préférable d’utiliser la fonction spéciale de mise en file d’attente de au lieu de mettre la feuille de style directement dans votre en-tête.

De plus, l’utilisation d’un thème enfant garantit que vos modifications ne seront pas écrasées si jamais vous devez mettre à niveau votre thème.

Parce que suivre les meilleures pratiques du code est une bonne chose, je vous recommande vivement d’utiliser à la fois un thème enfant et la fonction de mise en file d’attente.

D’accord, voici comment procéder :

Aller à Apparence → Éditeur et sélectionnez le fonctions.php fichier pour votre thème enfant.

Ensuite, collez ce code :

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

ajouter Font Awesome à WordPress

Assurez-vous d’enregistrer vos modifications et vous avez terminé ! Pas trop douloureux, non ?

Étape 2: Insérez des icônes de police géniales

Une fois que vous avez mis la feuille de style en file d’attente, vous pouvez insérer des icônes Font Awesome dans votre site en accédant à la recherche d’icônes Font Awesome et en trouvant une icône que vous souhaitez insérer :

WordPress: Comment ajouter des icônes de police géniales à WordPress

Lorsque vous cliquez sur une icône, Font Awesome vous donnera le code dont vous avez besoin pour utiliser l’icône :

WordPress: Comment ajouter des icônes de police géniales à WordPress

Tout ce que vous avez à faire est de placer ce code dans le Texte onglet de l’éditeur pour ajouter une icône à votre site.

Et c’est tout! Vous avez ajouté avec succès la prise en charge de Font Awesome à . Maintenant, il ne reste plus qu’à apprendre à styliser les icônes Font Awesome sur votre site .

Mais avant de vous montrer cela, je veux passer en revue la méthode du plugin pour ajouter Font Awesome Support. N’hésitez pas à aller de l’avant si vous avez opté pour la méthode manuelle plutôt que la méthode du plugin.

Comment ajouter des icônes de police géniales à avec un plugin

Si vous préférez utiliser un plugin au lieu de mettre manuellement en file d’attente la feuille de style Font Awesome, il existe une option gratuite solide répertoriée sur .org appelée Better Font Awesome.

En plus d’ajouter toujours la dernière feuille de style à votre site, Better Font Awesome également :

  • Vous permet d’utiliser des codes abrégés pour intégrer des icônes Font Awesome.
  • Vous donne un menu déroulant dans l’éditeur TinyMCE pour insérer des icônes.

Si vous prévoyez d’utiliser régulièrement les icônes Font Awesome, ces deux outils pourraient vous faciliter la vie. Mais pour une utilisation peu fréquente, je pense que la méthode manuelle est l’option la plus simple car c’est la plus légère.

Étape 1 : Installer et activer le plugin

Pour ajouter Font Awesome, il vous suffit d’installer et d’activer le plugin. Il n’y a vraiment rien d’autre.

Bien qu’il existe un panneau de paramètres de base auquel vous pouvez accéder en allant à Paramètres → Meilleure police géniale, vous êtes totalement libre de tout laisser par défaut.

Étape 2: Insérez des icônes de police géniales

Pour insérer des icônes Font Awesome avec le plugin, vous avez deux options différentes :

  • Utilisez le code du site Web de Font Awesome comme je l’ai démontré dans la section précédente.
  • Utilisez des shortcodes, qui peuvent être générés à partir d’une liste déroulante.

Parce que je vous ai déjà montré la première méthode dans la section précédente, je vais juste vous donner un bref aperçu du générateur de shortcode déroulant.

Lorsque vous allez créer un nouvel article ou une nouvelle page, vous remarquerez un nouveau Insérer l’icône bouton à côté du Ajouter des médias bouton. Si vous cliquez dessus, vous verrez toutes les icônes Font Awesome disponibles, ainsi qu’une option pour filtrer les résultats :

WordPress: Comment ajouter des icônes de police géniales à WordPress

Tout ce que vous avez à faire est de cliquer sur l’icône de votre choix et le plugin insérera le shortcode approprié :

Ajouter des icônes de police géniales à WordPress

Et c’est tout !

Maintenant que vous disposez de la prise en charge des icônes Font Awesome, examinons quelques façons dont vous pouvez styliser et manipuler vos icônes Font Awesome.

Comment styliser des icônes impressionnantes de police et changer les tailles

Quelle que soit la méthode que vous avez utilisée pour ajouter Font Awesome à , vous utiliserez les mêmes principes de base pour styliser vos icônes.

De plus, ces commandes fonctionnent que vous utilisiez des codes abrégés ou le code d’intégration du site de Font Awesome.

La plupart de ces conseils sont tirés directement de la page d’exemples Font Awesome, vous n’avez donc pas à vous soucier de la compatibilité.

Changer la taille des icônes géniales de la police

Commençons par un élément de base : augmenter la taille de vos icônes Font Awesome. Par défaut, les icônes sont assez petites, c’est donc certainement une situation que vous êtes susceptible de rencontrer.

Pour augmenter la taille d’une icône, vous pouvez utiliser l’un de ces modificateurs :

  • fa-lg – augmente la taille de 33%
  • fa-2x – double la taille
  • fa-3x – tripler la taille
  • fa-4x – …
  • fa-5x – …

Pour utiliser ces modificateurs, il vous suffit de l’ajouter après le nom de l’icône (mais à l’intérieur des guillemets) pour le code, et à l’intérieur des guillemets de classe pour le shortcode. Voici un exemple de triplement de la taille d’une icône pour les deux méthodes d’intégration :

  • Devient ceci sur le front-end :

    WordPress: Comment ajouter des icônes de police géniales à WordPress

    Faire pivoter les icônes impressionnantes de police

    Vous pouvez également facilement faire pivoter les icônes Font Awesome pour changer leur orientation.

    Voici les modificateurs pour la rotation. Vous pouvez utiliser n’importe lequel d’entre eux exactement de la même manière que les modificateurs de taille ci-dessus :

    • fa-rotate-90 – pivote de 90 degrés
    • fa-rotate-180 – pivote de 180 degrés
    • fa-rotate-270 – pivote de 270 degrés
    • fa-flip-horizontal – retourne l’icône le long de son axe horizontal
    • fa-flip-vertical – retourne l’icône le long de son axe vertical

    Ajouter une animation aux icônes de police géniales

    Vous pouvez également ajouter des animations de base à vos icônes. Font Awesome vous propose deux modificateurs différents pour ajouter des rotations :

    • fa-spin – ajoute une rotation en douceur
    • fa-pulse – fait tourner l’icône en 8 étapes différentes

    Ces animations sont mieux associées à des icônes circulaires. Si vous utilisez d’autres icônes de forme étrange, l’effet peut sembler un peu étrange.

    Changer la couleur de l’icône géniale de la police

    Enfin, je vais vous montrer comment changer la couleur des icônes Font Awesome. Malheureusement, il n’y a pas de modificateurs intégrés pour cela. Au lieu de cela, vous devrez utiliser du CSS personnalisé.

    Ne vous inquiétez pas, c’est super simple.

    Tout ce dont vous avez besoin est ce petit code :

    .fa-NAME {
    color: COLOR;
    }

    Où fa-NAME est le nom réel de votre icône et COLOR est la couleur que vous souhaitez la changer.

    Pour s’en tenir au Télécharger icône de nos exemples précédents, voici comment vous le feriez rouge :

    WordPress: Comment ajouter des icônes de police géniales à WordPress

    Vous pouvez facilement ajouter du CSS personnalisé en allant sur Apparence → Personnalisateur → CSS supplémentaire.

    Envelopper les choses

    Les icônes Font Awesome peuvent vous prendre quelques minutes à configurer. Mais une fois que vous les avez installés, ils sont là pour de bon. À partir de là, tout ce que vous avez à faire pour insérer et styliser des icônes individuelles de Font Awesome est de suivre les étapes ci-dessus.

    Sachez simplement que si vous utilisez la méthode manuelle, vous voudrez périodiquement entrer et mettre à jour le lien vers la feuille de style pour rester au courant des dernières versions.

    Affichages des publications : 43 697

    Informations sur l’auteur

All the CMS Templates You Could Ask For.

WordPress: Comment ajouter des icônes de police géniales à WordPress

2M+ items from the worlds largest marketplace for CMS TemplatesEnvato Market.



WordPress: Comment ajouter des icônes de police géniales à WordPress

#Comment #ajouter #des #icônes #police #géniales #