Share
Je suis sûr que beaucoup d’entre vous qui créez des thèmes WordPress ont besoin d’icônes. Les icônes sont un excellent moyen d’ajouter visuellement du sens à un bouton ou à un message lié, tel que des balises ou des permaliens. Une police d'icônes est un excellent moyen d'ajouter facilement un jeu d'icônes à votre thème au lieu de devoir les créer vous-même..
Il y a pas mal de superbes polices d'icônes. Si vous utilisez Bootstrap pour votre thème, la police de caractères de l'icône Glyphicons est intégrée. Pour cet article, je vais me concentrer sur l'un des plus populaires: Font Awesome.
Bien sûr, il existe d'autres moyens d'ajouter des icônes à votre thème, mais je souhaite parler des avantages de l'utilisation d'une police d'icônes au lieu d'images, d'images-objets, etc..
Le premier (et je pense que le meilleur) avantage est que c'est une police. Cela signifie que vous bénéficiez de tous les avantages du style que vous obtenez avec du texte normal. Vous pouvez facilement changer la couleur et la taille d'une icône avec un peu de CSS. Il sera également rendu aussi forte que votre appareil le permettra. Autrement dit, vous n'avez pas à vous soucier de créer des graphiques prêts pour la rétine..
Étant donné que toutes les icônes sont incluses dans un fichier de police, cela signifie qu'il ne s'agit que d'une demande HTTP à charger. Cela peut vraiment vous donner un peu de performance de chargement de page si vous utilisez un certain nombre d'icônes. Vous pouvez également inclure le CSS nécessaire pour rendre les icônes avec tous les autres .css les fichiers que vous chargez pour votre thème.
Il existe plusieurs façons d’ajouter Font Awesome à votre thème. Ils ont documenté différentes manières d'ajouter à votre site Web sur leur page de démarrage..
Le moyen le plus simple d’ajouter Font Awesome à votre thème est probablement d’utiliser BootstrapCDN. Tout ce que vous aurez à faire est d’ajouter ce qui suit à la dans votre thème header.php fichier:
Ou, mieux encore, utilisez le wp_enqueue_style une fonction.
Vous pouvez également ajouter le projet Font Awesome GitHub à la racine de votre thème et l’ajouter à votre thème. Vous devrez alors mettre la police en file d'attente à l'aide de la touche wp_enqueue_style une fonction.
Une méthode avancée consiste à utiliser Sass ou LESS, selon ce que vous utilisez dans le projet de votre thème. Vous voudriez ajouter le font-génial dossier dans la racine de votre projet, vous devrez alors faire quelques modifications.
Ouvrez votre projet font-awesome / less / variables.less ou font-awesome / scss / _variables.scss et éditer le @ fa-font-path ou $ fa-font-path variable pour pointer vers votre répertoire de polices comme ceci:
$ fa-font-path: "fonts";
Vous devrez recompiler le préprocesseur CSS de votre projet pour prendre en compte les modifications..
Si vous connaissez bien utiliser Bower, il existe un autre moyen avancé. Vous utiliseriez les fichiers dans le bower_components / font-awesome dossier au cours de vos tâches de construction au lieu de les ajouter à votre projet.
Vous devez installer Font Awesome en lançant bower installe font-awesome --save et cela l'ajouterait à votre projet bower.json fichier. Vous devez ensuite faire pointer les fichiers Sass ou LESS de votre thème vers les fichiers appropriés pour créer votre .css fichier. Vous pouvez également utiliser la tâche grunt-contrib-copy pour copier les polices dans votre propre dossier dans votre projet..
Vous pouvez voir comment faire cela dans mon exemple de projet.
Une fois que vous avez ajouté Font Awesome à votre thème, vous pouvez commencer à les utiliser dans votre thème. Chaque thème est évidemment différent, mais je vais donner quelques exemples d'éléments qui pourraient être relativement universels pour la plupart des thèmes..
Font Awesome est fourni avec un certain nombre d'icônes populaires de réseaux sociaux et de marques. La plupart du temps, une icône sociale est un lien. Nous pouvons donc ajouter la classe icon à la balise anchor de la manière suivante:,
Vous pouvez voir un exemple d’ajout de plusieurs icônes dans le footer.php déposer dans mon exemple de projet ici.
Les méta-données de vos publications, comme je l’ai mentionné précédemment, sont un autre excellent moyen d’utiliser des icônes. Les trois que j'ai ajoutés dans l'exemple de projet sont le lien de commentaires, les balises et le permalien.
Voici des exemples pour chacun:
Ajouter un nouveau ',' standard '), __ (' 1 ',' standard '), __ (' %', 'la norme' ),","); ?>
Accentsconagua
'. __ ('% 1 $ s', 'tuts-font-awesome'). '', $ tag_list); ?> ">
Vous pouvez voir tous ces exemples dans mon exemple de projet loop.php déposer ici.
Le dernier exemple concerne les liens post-pagination. J'aime bien ajouter des chevrons devant "Older" et avant "Newer". Si vous utilisez le next_posts_link et previous_post_links dans votre projet, vous voudrez ajouter une étendue avec la classe appropriée comme ceci:
Older ',' tuts-font-awesome ')); ?>',' tuts-font-awesome ')); ?>Vous pouvez voir tous ces exemples dans mon exemple de projet pagination.php déposer ici.
Vous devriez maintenant avoir tout pour commencer à utiliser Font Awesome dans votre thème WordPress. J'ai donné quelques exemples où je me suis souvent retrouvé à utiliser des icônes. Font Awesome propose d’autres possibilités telles que l’empilement, la rotation et les icônes animées. Je suggérerais de jeter un coup d'œil à la page Exemples de polices impressionnantes pour découvrir toutes les merveilles supplémentaires..
