L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Utilisation de Font Awesome avec WordPress
Cet article a été publié en février 2015 et a été mis à jour en 2018 pour en adapter la version ainsi que d'autres modifications et ajouts mineurs.
Web Icons
Les utilisateurs d'un site Web se concentrent tout autant sur les conception visuelle d'un site Web telle qu'elle se trouve sur le contenu qu'ils espèrent y trouver
Traditionnellement, les concepteurs et les développeurs utilisaient des images / feuilles de sprite individuelles pour leurs icônes; ces graphiques sont une série d'images au pixel près qui seraient utilisées dans des parties spécifiques du site (telles que la barre de recherche, les éléments de navigation, les icônes de chargement, etc.).
L'affichage des icônes avec des images / sprites fonctionnait bien. pendant longtemps (et de nombreux sites Web les utiliseront encore). Toutefois, l'accent mis sur le design réactif étant plus important que jamais, le défi consistait à fournir une iconographie époustouflante, parfaite indépendamment de votre appareil.
Que sont les icônes de police?
Les icônes de police permettent d'afficher des icônes personnalisables et parfaitement réactives sur notre site Web sans utiliser d'images ou de feuilles de sprite supplémentaires.
Les icônes de police sont exactement ce qu'elles sonnent, une police entièrement composée d'icônes.
Lorsqu'une police normale définit des caractères tels que 'a', 'b', 'c', une police d'icônes définit des caractères qui sont des symboles, tels que le symbole de recherche , le symbole de bascule de menu et tout un tas d’autres – le tout dans une police.
Pourquoi utiliser des icônes de police?
Les images traditionnelles ont bien fonctionné historiquement, mais les polices d'icônes nous offrent une plus grande flexibilité et nous permettent de gérer plus facilement nos icônes, avec réactivité et facilité.
Les icônes de police sont totalement réactives
- Ces icônes sont des vecteurs et peuvent être redimensionnées à n'importe quelle taille sans perte de qualité.
- Les images traditionnelles sont des images matricielles créées à une taille / dimension définie (généralement basées sur un quadrillage tel que 48 × 48). Ces images peuvent paraître terribles si elles sont redimensionnées ou visionnées sur un périphérique haute résolution.
Les icônes de police peuvent être stylées, positionnées et manipulées
- Les icônes de police peuvent être contrôlées comme s'il s'agissait de polices classiques; vous pouvez définir leur couleur, la couleur de fond, l'alignement du texte, la hauteur de ligne et d'autres attributs pour les styler à l'aide de CSS.
- Les images traditionnelles ne vous permettent pas un contrôle précis. Si vous souhaitez qu'une image soit légèrement différente en couleur ou en taille, vous devez télécharger une autre image.
Les icônes de polices sont multi-navigateurs et abondamment disponibles
- Les icônes de polices ont une compatibilité étendue allant jusqu'aux anciens navigateurs (je vous regarde, IE6)
- Les concepteurs ont des dizaines de superbes polices d'icônes passé d'innombrables heures sur; ces polices sont généralement mises à jour fréquemment et affinées pour offrir la meilleure expérience.
Voici un exemple aléatoire d'une police d'icônes; aucune image requise.
Avec toutes les superbes polices d'icônes gratuites, il existe très peu de raisons d'utiliser des images traditionnelles pour les icônes. Cependant, il existe encore des inconvénients discutables avec les polices d’icônes.
- Différences entre les navigateurs et les systèmes d’exploitation – Il s’agit de polices, il appartient au navigateur de rendre les icônes (il existe de subtiles variations entre chaque système d’exploitation, entre navigateurs, etc.). et même entre différentes versions du même navigateur). Cependant, les images traditionnelles ont la même apparence, quel que soit le type d'affichage.
- Toutes les icônes n'existent pas – Les concepteurs ont couvert la plupart des icônes dont vous aurez besoin dans vos projets; Cependant, toutes les icônes imaginables n'ont pas encore été créées et vous pouvez vous retrouver dans certaines situations à vous fier sur des images.
Obtenir police Awesome dans votre projet WordPress
Font Awesome est incluse dans des milliers de projets Internet, y compris des thèmes WordPress (tels que le thème de base de SitePoint de SitePoint) et ses plugins. Intégrer Font Awesome à WordPress, qu'il s'agisse d'un thème ou d'un plugin, est extrêmement facile et ne nécessite que quelques étapes pour se mettre en marche.
Il existe des dizaines de polices de caractères à utiliser, mais pour ce tutoriel, j'utiliserai . ] Font Awesome car ils ont des centaines d’icônes vraiment étonnantes. Nous utiliserons la version 5.4 de Font Awesome
Utiliser une copie locale ou externe de Font Awesome
Il existe deux options principales pour obtenir Font Awesome dans votre projet; vous pouvez charger les fichiers sur votre serveur Web ou simplement créer un lien vers la feuille de style hébergée en externe sur un CDN.
Téléchargez Font Awesome et incluez les polices / CSS manuellement
Cliquez sur le lien de téléchargement situé sur la page d'accueil de Font Awesome pour obtenir le fichier zip. Dans le fichier zip, vous verrez les polices et le fichier CSS requis (il existe également des fichiers LESS / Sass mais nous n'allons pas les utiliser).
Votre fichier zip devrait contenir les ressources suivantes, dont vous aurez besoin. déplacez-vous vers votre projet (déplacez-les dans leurs propres répertoires applicables via FTP). Créez un répertoire dans votre thème ou plug-in appelé 'polices' et un autre appelé 'css' et déplacez les fichiers dans ces répertoires.
Allez dans le functions.php de votre thème et créez une nouvelle fonction que nous allons créer. utiliser pour charger notre feuille de style. Créez une fonction et attachez-la à l'action wp_enqueue_scripts . Une fois que vous avez cette fonction, appelez la fonction wp_enqueue_style et chargez votre feuille de style.
// met en file d'attente notre police de caractères fournie localement
fonction enqueue_our_required_stylesheets () {
wp_enqueue_style ('font-awesome', get_stylesheet_directory_uri (). '/css/font-awesome.css');
}
add_action ('wp_enqueue_scripts', 'enqueue_our_required_stylesheets'); Lien vers un CDN hébergé
L'hébergement avec un CDN tiers facilite grandement le processus; Pour ce faire, il vous suffit de créer une fonction dans votre fichier functions.php et de la lier à l'action de wp_enqueue_scripts . Dans cette fonction, il vous suffira de mettre en file d'attente la feuille de style (sauf que cette fois-ci, vous ferez référence au lien hébergé en externe):
// met en file d'attente notre police de style externe
fonction enqueue_our_required_stylesheets () {
wp_enqueue_style ('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/5.4.0/css/font-awesome.min.css');
}
add_action ('wp_enqueue_scripts', 'enqueue_our_required_stylesheets'); Comment utiliser Font Awesome (et les polices à icônes en général)
Font Awesome peut être utilisé de deux manières différentes. La manière dont vous l'implémentez dépend entièrement de vous et des besoins de votre projet.
Un pseudo-élément (une méthode CSS)
L'utilisation d'une pseudo-méthode pour ajouter votre icône implique l'utilisation de : before ou : après pseudo-sélecteurs CSS pour styliser l’élément HTML souhaité.
Ce que vous faites est de déterminer l'élément auquel vous souhaitez appliquer votre icône, de créer un style CSS avant ou après l'élément et de définir manuellement l'icône qui sera utilisée (avec son style et son design).
Each police dans un jeu d'icônes a un code unique qui représente l'icône; Ce code est Unicode et indique au navigateur que vous souhaitez afficher le caractère correspondant à ce code. Vous créez votre pseudo-élément et définissez sa police pour qu'elle utilise votre famille d'icônes de police, puis vous définissez sa valeur de contenu.
Les propriétés principales que vous devez définir sont content et famille de polices à leurs valeurs respectives (pour que le pseudo-élément apparaisse).
Exemple de bouton
Voici un exemple de sortie:
Étant donné que nous voulions afficher l'icône représentant plusieurs engrenages, nous avions l'habitude d'utiliser Unicode pour cette icône. Chacune des pages Font Awesome affichera la référence Unicode que vous devez inclure. cet exemple, l'Unicode est f085 comme indiqué sur sa page d'exemple .
Pseudo-Element Pros
- Vous pouvez être très précis avec vos conceptions; vous définissez la taille, la hauteur de ligne, les couleurs et les styles de votre choix
- Il n'est pas nécessaire d'utiliser un élément HTML supplémentaire pour générer une icône (vous pouvez l'appliquer directement à un autre élément, tel qu'un H1 ou un div, puis positionnez-le autour de l'élément
Inconvénients
- Nécessité de tout configurer manuellement (vous ne pouvez pas utiliser une classe prédéfinie Font Awesome pour tout agrandir ou pour effectuer une rotation ou d'autres modifications)
- Difficile de cibler avec JavaScript / jQuery (étant donné que vous utilisez une méthode CSS sur un élément, vous ne pouvez pas cibler un élément et modifier une icône / un swap, c'est parce que vous ne pouvez pas cibler des pseudo-éléments)
- Si Font Awesome met à jour leurs références Unicode et vous mettez à jour la feuille de style nécessaire pour ressaisir les valeurs Unicode)
Un élément en ligne (une méthode HTML)
La la plus simple manière d'utiliser Font Awesome est affecter les classes Font Awesome à un élément.
Lorsque vous utilisez une icône de police, cette Ainsi, il générera un pseudo-élément avant / après l'élément ciblé et générera le style de l'icône.
Si vous souhaitez afficher une icône, vous devez affecter la classe fa à un élément (généralement des éléments tels que i et span conviennent le mieux) . Cette classe connecte votre élément à la police Font Awesome.
Une fois que votre élément a la classe de base fa vous pouvez ajouter le nom de la classe correspondant à l'icône que vous essayez d'afficher. Par exemple, si vous souhaitez afficher l'icône d'appareil photo, vous devez également ajouter la classe fa-camera-retro . Le choix de cette classe d'icônes correspondante recherchera la police de caractères et affichera son caractère unicode (son glyphe).
Ce qui donnerait quelque chose comme ceci:
Une fois que vous Pour que votre icône soit rendue, vous pouvez créer des éléments plus sophistiqués à l'aide de classes Font Awesome supplémentaires pour appliquer le dimensionnement, les rotations, les couleurs et les styles.
Vous pouvez créer un menu de navigation simple à l'aide des classes et styles prédéfinis Font Awesome:
/ * Styles de base pour une liste déroulante * /
.nav-list .nav-item {
bloc de visualisation;
}
.nav-item .nav-link: premier-enfant {
border-top: 1px solide #ccc;
}
.nav-item .nav-link {
bloc de visualisation;
rembourrage: 8px 12px;
fond: #eee;
bordure: solide 1px #ccc;
border-top: 0px;
couleur: # 333;
}
.nav-link> i {
marge droite: 10px;
}