Share
J'aime les icônes sociales, je vais l'admettre. J'ai littéralement douzaines des ensembles d'icônes sociales que j'ai rassemblés au cours des dernières années et j'ai même créé quelques-uns de mes ensembles pour essayer de réaliser cet ajustement parfait pour un projet particulier.
Mais récemment, j'ai découvert les polices d'icônes et je n'ai pas utilisé ces anciennes icônes d'image depuis un moment..
Imaginez des dingbats de tous types et styles - icônes sociales, icônes de sites Web, tout ce à quoi vous pouvez penser - mais ce ne sont pas des images: elles sont en réalité les polices.
C'est un gros problème car avec les icônes d'image, vous obtenez des images statiques. Vous pouvez obtenir plusieurs tailles différentes de la même image, mais vous ne pouvez vraiment rien faire avec elles, sinon les utiliser telles quelles..
Une icône qui est en fait une police est un animal totalement différent. S'il est vrai que les icônes sont d'apparence plus simple, elles compensent leur minimalisme en étant hautement personnalisables. Avec une police d'icône, vous pouvez facilement changer la taille et la couleur d'une icône (tout comme les polices de texte!). De plus, les polices d’icônes ont des arrière-plans transparents qui fonctionnent vraiment dans les anciennes versions d’Internet Explorer, si vous travaillez dans une ancienne version d’IE est une considération pour vous..
Un autre avantage est qu'ils peuvent remplacer les sprites d'image CSS. L'utilisation d'une police d'icônes personnalisée avec un nombre limité d'icônes fonctionne de la même manière que les images-objets, mais vous permet de styliser des icônes comme du texte..
Il vous appartient de décider si une police d’icônes fonctionnera mieux que les icônes d’image de votre projet. ils ont tous les deux des avantages et des inconvénients. Mais pour notre propos, nous supposerons que vous êtes prêt à essayer les polices-icônes et que vous voulez savoir comment les utiliser dans un thème WordPress..
Pour notre didacticiel, nous allons constituer un petit ensemble d’icônes de polices de caractères de médias sociaux pour notre projet hypothétique. Nous aurons besoin d'icônes pour Facebook, Twitter et Pinterest, alors commençons.
Il existe un petit nombre de générateurs de polices d'icônes en ligne qui vous permettent de créer des jeux de polices personnalisés juste pour vous. Vous pouvez créer des polices personnalisées projet par projet. c'est tellement pratique! Ici, nous allons utiliser l'application de générateur d'Icomoon, car c'est le service que j'ai le plus souvent utilisé..
Le générateur de polices d’Icomoon est amusant et facile à utiliser. Vous pouvez choisir parmi un certain nombre de polices à icônes gratuites et d’autres commerciales. J'ai trouvé la qualité des polices proposées très élevée. Vous pouvez même télécharger des polices d'icône que vous trouvez ailleurs et les utiliser dans votre police personnalisée. Très utile.
Construisons notre police d'icônes de médias sociaux personnalisée. Je vais supposer que vous n'avez jamais fait cela auparavant, mais ne vous inquiétez pas si vous devez aller de l'avant. Nous rattraperons.
Lancez l'application Icomoon dans votre navigateur et vous verrez ceci:
Le jeu gratuit de polices de base Icomoon est chargé et vous pouvez également voir quelques autres polices à icônes gratuites. Je vous recommande de jeter un coup d'œil aux autres ensembles non chargés, car vous y trouverez peut-être quelque chose que vous aimez. Pour afficher les autres ensembles disponibles, faites défiler vers le bas et cliquez sur Plus d'icônes.
Sur l'écran suivant, vous verrez un certain nombre d'autres polices gratuites et commerciales (Entypo est un jeu vraiment sympa que j'utilise fréquemment, juste pour votre information). Pour en ajouter dans la fenêtre de sélection principale, cliquez simplement sur le bouton Ajouter bouton en dessous de cet ensemble.
Une fois que vous êtes revenu sur l’écran principal, et si vous voulez supprimer un ensemble, cliquez sur l’icône du menu en haut à droite de celui-ci, puis sur Supprimer le jeu.
Si vous avez votre propre police d'icône, peut-être celle que vous avez obtenue d'un client ou téléchargée d'un autre site, vous pouvez la télécharger en cliquant sur le bouton Importer des icônes en haut de l’écran de sélection, les icônes de votre ensemble seront chargées. Vous pouvez sélectionner des polices à partir de cet ensemble, tout comme les jeux de polices natifs Icomoon..
Pour notre projet, nous recherchons des icônes sociales pour Facebook, Twitter et Pinterest. Beaucoup des ensembles disponibles ont tout ou partie de ces icônes, alors comment choisissez-vous?
Choisir des icônes dans le même ensemble est une solution simple: si un ensemble que vous aimez (et qui correspond aux besoins de conception du projet) possède toutes les icônes dont vous avez besoin, c'est parfait. Utilisez ceux-ci. Parfois, cependant, ce n'est pas le cas - peut-être que cet ensemble qui vous plait n'a pas d'icône Pinterest ou que celui de YouTube est un peu bizarre.
Si tel est le cas, choisissez parmi différents ensembles, mais soyez prudent: Icomoon utilise une taille de grille de base pour chacune de ses polices à icônes. pour la série Icomoon Free, la taille de la grille est de 16. Vous obtiendrez les meilleurs résultats (apparence la plus nette) dans un navigateur lorsque vous définissez une taille de police de 16 ou un multiple de 16..
Si vous regardez l'icône de police Entypo que j'ai mentionnée plus tôt, vous verrez que sa grille de base est de 20, ce qui signifie que vous devez définir la taille de votre police sur 20 ou un multiple de celle-ci pour obtenir les résultats les plus précis. Si vous souhaitez mélanger des icônes d'ensembles de différentes tailles de grille de base, il vous suffit de les vérifier dans votre navigateur pour voir si la qualité d'affichage est acceptable. Vous pouvez voir les tailles de grille de toutes les polices Icomoon en cliquant sur Afficher plus de polices au bas de la fenêtre principale de l'application.
Compte tenu de ces considérations, vous pouvez utiliser l'outil de recherche situé en haut de l'application pour rechercher des icônes par leur nom afin de pouvoir comparer plusieurs versions de la même icône sociale..
Bien sûr, vous pouvez également parcourir les ensembles, ce qui est un bon moyen de perdre une heure de temps..
Pour choisir vos icônes, il suffit de cliquer dessus. Ils seront ajoutés à votre jeu automatiquement. Lorsque vous avez terminé, cliquez sur le bouton Police de caractère bouton en bas et vous verrez toutes vos icônes prêtes à être téléchargées. Clique le Télécharger bouton pour obtenir votre nouvelle police personnalisée parfaite et vous verrez une zone de texte où vous pouvez nommer votre police - je le nomme habituellement pour le client pour les garder droites; dans ce cas, je l'appellerai «tutoriel».
Que se passe-t-il si vous créez cette police personnalisée, puis le client décide d’ajouter, par exemple, Vimeo et Instagram à leurs liens de médias sociaux le mois prochain? Devez-vous partir de zéro?
Non tu ne.
Dans votre téléchargement sera un selection.json fichier qui stocke tous les paramètres de votre projet. Tout ce que vous avez à faire est d’ouvrir l’application Icomoon et de cliquer sur Importer des icônes pour télécharger le fichier JSON et vos sélections seront à nouveau affichées. Vous allez ajouter les nouvelles icônes, puis recréer la police et la télécharger à nouveau..
Nous arrivons maintenant aux parties semi-difficiles.
Téléchargez les quatre fichiers dans le / polices dossier de votre police personnalisée à un / polices dossier dans votre thème.
Ouvrez le style.css déposer dans votre police personnalisée et copier le @ font-face extrait qui ressemble à ceci:
Accentsconagua
@ font-face font-family: 'tutorial'; src: url ('fonts / tutorial.eot? 6npck9'); src: url ('fonts / tutorial.eot? # iefix6npck9') format ('embedded-opentype'), url ('fonts / tutorial.woff? 6npck9') format ('woff'), url ('fonts / tutorial. ttf? 6npck9 ') format (' truetype '), url (' fonts / tutorial.svg? 6npck9 # tutorial ') format (' svg '); poids de police: normal; style de police: normal; Ensuite, dans votre thème style.css fichier, collez cet extrait. N'oubliez pas de changer l'URL où les polices figureront dans votre thème si vous utilisez autre chose que le répertoire 'polices'.
Il existe deux méthodes principales pour le faire; l'un utilise une classe pour chaque icône pour les ajouter en tant que pseudo-éléments (c'est celui que j'utilise), et l'autre utilise un attribut data pour les ajouter en tant qu'éléments réels dans le code HTML.
Voici un exemple d'utilisation de la méthode classe par icône dans une liste non ordonnée. Supposons que nous ayons une fonction qui place une rangée d'icônes sociales dans l'en-tête de votre thème. Ces captures d'écran illustrent quelques exemples d'utilisation de ce thème..
Allez dans votre thème functions.php déposer et ajouter ce code:
Ensuite, retournez dans le fichier style.css de votre police d’icône personnalisée et copiez le fragment de code suivant:
[class ^ = "icon-"], [class * = "icon-"] font-family: 'tutorial'; parle: aucun; style de police: normal; poids de police: normal; variante de police: normal; transformation de texte: aucune; hauteur de ligne: 1; / * Meilleur rendu des polices =========== * / -webkit-font-smoothing: antialiasé; -moz-osx-font-lissage: niveaux de gris; .icon-facebook: before content: "\ e600"; .icon-twitter: before content: "\ e601"; .icon-pinterest: before content: "\ e602";
Collez cet extrait dans votre thème style.css fichier. Si tout se passe comme prévu, vous devriez maintenant avoir trois icônes dans votre en-tête, et vous pouvez changer la couleur, la taille et d'autres attributs comme le texte.
Parfois, un problème de rendu des polices d'icône apparaissait dans Chrome. Si elles semblaient saccadées dans Chrome, essayez de réorganiser votre @ font-face extrait comme celui-ci avec SVG suivant EOT:
@ font-face font-family: 'tutorial'; src: url ('fonts / tutorial.eot? 6npck9'); src: url ('fonts / tutorial.eot? # iefix6npck9') format ('embedded-opentype'), url ('fonts / tutorial.svg? 6npck9 # tutorial') format ('svg'), url ('fonts / tutorial.woff? 6npck9 ') format (' woff '), url (' fonts / tutorial.ttf? 6npck9 ') format (' truetype '); poids de police: normal; style de police: normal; L'autre méthode pour obtenir des icônes dans votre thème consiste à utiliser des attributs de données pour les insérer en tant qu'éléments. Je ne suis pas un grand fan de cette méthode, car cela signifie que l'icône doit être insérée dans le code HTML lui-même, ce qui me semble plus confus. Mais voilà, vous pouvez vous trouver comme une méthode plus que l'autre.
Dans functions.php, vous utiliserez des attributs de données comme ceci:
Et dans ton thème style.css:
[icône de données]: before font-family: 'tutorial'; contenu: attr (data-icon); parle: aucun; poids de police: normal; variante de police: normal; transformation de texte: aucune; hauteur de ligne: 1; -webkit-font-lissage: antialiasé;
Vous connaissez maintenant les bases de la création et de l'utilisation de polices d'icônes personnalisées dans votre thème WordPress - pas trop difficile. Trouvez des icônes que vous aimez et essayez-les lors de votre prochain projet..
Voici quelques ressources pour passer à l'étape suivante. Qui sait; vous pouvez vous retrouver à concevoir votre propre police d'icônes à un moment donné, lorsque vous ne trouvez pas la police appropriée pour ce projet particulier.
Autres endroits pour générer des polices d’icône personnalisées:
Si vous voulez plus d’informations sur l’utilisation des attributs de données, CSS Tricks a un bon aperçu.
