Intégrer et utiliser des polices d’icônes dans WordPress

Les images sont excellentes, mais elles posent des défis aux sites: elles nécessitent des requêtes http supplémentaires, augmentent le poids des fichiers et ne conviennent pas. D’autre part, les polices d’icônes n’ont besoin que d’une requête HTTP sur un ensemble d’icônes de n’importe quelle taille, sont belles à n’importe quel affichage ou résolution, et vous pouvez redimensionner [protégé par courriel] # en fonction d’eux. De nombreux thèmes WordPress utilisent maintenant des polices d’icônes, y compris les thèmes par défaut 13, 14 et 15. Voyons pourquoi on les utilise et où on peut les trouver.
Pourquoi utiliser des polices d’icônes? Les polices d’icônes utilisent des pictogrammes au lieu du texte et, comme le texte, peuvent être modifiées à volonté en appliquant l’effet CSS. La beauté de cela est qu’ils peuvent s’adapter à de nombreux dessins individuels tout en restant pointus dans toutes les dimensions d’affichage: une combinaison puissante. Icônes: icônes sociales, icônes de site Web, quoi qu’il arrive, sauf qu’elles ne sont pas des images. Au lieu de passer une demi – semaine à plaisanter avec des images de différentes tailles et à télécharger des fichiers, vous pouvez vous concentrer sur la prise de décisions de conception intelligentes dans une gamme d’options flexibles.
Les polices d’icônes sont généralement utilisées pour deux fonctions de base: améliorer le texte et être utilisées uniquement à des fins fonctionnelles ou informatives. Utilisez les polices d’icônes pour ajouter des couches supplémentaires d’optimisation visuelle instantanée à votre site. Voici quelques choses intéressantes que vous pouvez faire une fois que vous avez placé les caractères de l’icône: changer leur couleur à n’importe quelle couleur que vous voulez ajouter, ajuster les ombres, ajouter des traits facilement, Ombres et textures créer une animation lisse et accrocheuse appliquer des effets standards tels que l’assombrissement ou la rotation en utilisant le support avec des knocks transparents
Les charges sont affichées dans la section personnaliser les icônes Créez votre propre police d’icônes en quelques secondes. Avec plus de 9000 icônes disponibles, fontastic vous permet de créer vos propres polices d’icônes en quelques secondes. Vous pouvez même publier vos propres icônes en tant que SVG Sprite.
Vous pouvez publier en un seul clic et chaque changement est immédiatement synchronisé avec leur serveur. C’est trop facile. Icônes d’interface élaborées. Si vous êtes prêt à acheter un très beau jeu de polices d’icônes de haute qualité, pictos pictogrammes est un problème à considérer. Chaque achat comprend des fichiers sources dans différents formats communs tels que ai, EPS, SVG et sketch, ce qui facilite la personnalisation ultérieure. La plupart des sites ci – dessus fournissent leurs propres instructions, tutoriels et FAQ pour vous aider à commencer à utiliser les polices d’icônes. Les étapes nécessaires à la mise en oeuvre varient d’un fournisseur à l’autre.
En utilisant le plug – in d’icônes WP SVG pour simplifier les opérations (et fournir des options rapides, simples et sans Code pour votre site), nous utiliserons le plug – in d’icônes WP SVG gratuit pour illustrer quelques conseils d’installation ci – dessous. Le plug – in vous permet d’accéder à plus de 490 icônes que vous pouvez facilement insérer n’importe où sur votre site en utilisant des raccourcis clavier. Vous pouvez également utiliser la fonction d’importation du plug – in pour insérer des icônes personnalisées d’autres sources, comme icomoon. Après avoir téléchargé et installé l’icône WP SVG, un nouvel onglet appelé icône WP SVG apparaît au bas du menu administration. Lorsque vous passez le curseur sur elle, quatre autres onglets s’affichent:
Ensemble d’icônes par défaut: il s’agit de l’onglet principal où vous pouvez sélectionner des icônes, sélectionner des éléments à envelopper et copier des raccourcis clavier pour les coller n’importe où sur le site. Toute la section est incluse
Directement dans l’éditeur de pages et de messages, nous allons passer en revue dans la section suivante. Ensembles d’icônes personnalisés: Si vous décidez d’utiliser icomoon pour des paquets d’icônes personnalisés, c’est l’onglet que vous utiliserez pour importer des paquets d’icônes à afficher sur le site. Paramètres: les plug – ins sont conçus pour être aussi simples et intuitifs que possible, de sorte qu’il n’y a pas beaucoup de paramètres disponibles. Vous pouvez choisir si vous voulez charger l’icône par défaut, sélectionner l’élément d’icône par défaut et décider si vous voulez supprimer toutes les données pendant la désinstallation. Mise à jour: Ceci vous apportera une version avancée du plug – in dont nous discuterons plus loin dans cet article. L’intégration de polices d’icônes dans les messages et les pages le plug – in d’icônes WP SVG facilite l’insertion d’icônes dans les messages ou les pages. Mais avant de le faire, assurez – vous d’avoir cliqué sur le curseur dans la zone de droite de l’éditeur pour afficher l’icône, par exemple entre les segments ou à côté des sous – titres. Si vous êtes sur l’écran d’édition d’un article ou d’une page, il suffit de trouver le nouveau bouton au – dessus de l’éditeur visuel \/ texte marqué « ajouter une icône ». Une fois cliqué, ouvre une fenêtre qui affiche les mêmes options que dans l’onglet jeu d’icônes par défaut. Cela vous permet d’insérer facilement le Code court de l’icône directement dans un message ou une page sans quitter l’éditeur et de copier et coller le Code court à chaque fois. Faites défiler plus de 490 icônes et sélectionnez l’icône à insérer. En utilisant le bouton projet en haut, vous pouvez choisir d’inclure ou non l’icône entre les balises H1, H2, H3, Span, DIV, I ou B. Notez que le plug – in vous permettra de sélectionner un seul élément à la fois.
Chaque fois que vous cliquez sur le bouton bleu insérer une icône, votre code raccourci est généré et inséré dans un article ou une page. Il viendra.
Il est considéré comme un code raccourci dans l’éditeur, mais vous pouvez voir à quoi ressemble l’icône sur un article ou une page en l’sauvegardant sous forme de brouillon et en appuyant sur le bouton aperçu. Intégrer les polices d’icônes dans la zone Widget parce que le plug – in d’icônes WP SVG génère du Code court pour toutes les icônes, vous pouvez simplement les copier et les coller dans n’importe quelle zone du site qui supporte le HTML, y compris les widgets. C’est une bonne façon de styliser les barres latérales et les pieds de page, pas seulement le texte. Par exemple, vous pouvez aller à l’apparence > Widget et faire glisser un widget texte dans une barre latérale ou un pied de page. Utilisez l’onglet jeu d’icônes par défaut pour générer un code d’icône court qui est collé dans la zone de contenu avec tout autre HTML que vous souhaitez inclure. Appuyez sur Enregistrer et l’icône sera affichée en temps réel sur votre site Web. L’importation de paquets d’icônes personnalisés à partir d’icomoon icomoon est l’un des meilleurs endroits pour rechercher des polices d’icônes gratuites, et le plug – in d’icônes WP SVG a une fonction d’importation qui permet aux utilisateurs de l’utiliser. Bien que l’ensemble d’icônes par défaut fourni par le plug – in soit excellent, vous voudrez peut – être que certaines icônes apparaissent légèrement différentes, et icomoon est le choix parfait pour cela. Pour commencer, accédez à la Bibliothèque icomoon sur son application et parcourez la collection des polices d’icônes disponibles. Certains doivent être achetés, mais gratuitement il y aura un bouton + ajouter en dessous. Lorsque vous en trouvez un que vous aimez, cliquez sur + ajouter. Toutes les icônes de la collection sont ensuite affichées. Maintenant vous êtes libre de choisir ce que vous voulez. Si vous n’avez besoin que de quelques icônes, cliquez sur chaque icône ou utilisez Shift pour sélectionner plusieurs lignes d’icônes à la fois. Si vous êtes satisfait de votre sélection, cliquez sur générer des polices en bas de l’écran. À partir de là, vous pouvez choisir de personnaliser certains paramètres – nommez les rôles d’une manière spécifique
Co ou modifier son préfixe de classe – cliquez sur le bouton préférences en haut de l’écran. Lorsque vous aurez terminé, cliquez sur le bouton téléchargement en bas de l’écran et votre rôle arrivera sous forme de fichier zip. Vous pouvez maintenant retourner dans la zone de gestion WordPress et accéder à l’ensemble d’icônes WP SVG > personnaliser. Cliquez sur le bouton sélectionner un fichier pour sélectionner un fichier zip dans le dossier de téléchargement, puis cliquez sur le bouton importer. Si l’importation est réussie, vous pouvez voir toutes les nouvelles icônes énumérées sur la page. Maintenant, lorsque vous cliquez sur le bouton Ajouter une icône pour insérer une icône sur n’importe quel article ou page, vous verrez un nouvel onglet paquets personnalisés à côté de l’onglet paquets par défaut, auquel vous pouvez passer pour sélectionner et insérer des icônes personnalisées. N’oubliez pas que vous ne pouvez utiliser qu’un seul paquet d’icônes personnalisées à la fois. Pour ajouter ou supprimer des icônes d’un paquet personnalisé, vous devez retourner à l’onglet ensembles d’icônes personnalisés et cliquer sur désinstaller le paquet pour supprimer tout le contenu. Après cela, vous pouvez retourner à icomoon pour sélectionner les nouvelles icônes que vous voulez, télécharger les fichiers Zip et les importer. Si vous désinstallez des paquets d’icônes personnalisés, mais que vous pouvez toujours les voir dans WordPress, vous devrez peut – être effacer le cache du navigateur Web. Pourquoi voudriez – vous passer à Premium? À ce stade, vous vous demanderez comment utiliser toutes les autres excellentes options de personnalisation du plug – in énumérées en haut de cet article, comment changer la couleur de l’icône, ajouter des ombres, et même appliquer des effets d’animation. Malheureusement, ces options ne sont pas disponibles dans la version gratuite du plug – in d’icônes WP SVG. Mais la mise à niveau vers Premium en vaut la peine. Pour la version avancée, lorsque vous cliquez sur Ajouter une icône, un nouveau bouton Propriétés avancées apparaît dans l’éditeur d’icônes
Un article ou une page. Vous pouvez facilement redimensionner les icônes, ajouter des hyperliens et les définir à répéter plusieurs fois. Vous pouvez également lui donner de beaux effets d’animation CSS3, en configurant l’animation pour correspondre à un événement particulier, en ajoutant un nom de classe, en ajustant sa couleur et en le tournant. Lorsque vous accédez au menu apparence > menu, vous serez en mesure d’agrandir chaque page de menu et de trouver un menu déroulant qui contient les icônes de menu personnalisées disponibles dans cette version avancée du plug – in. Par défaut, il n’est défini à aucune icône, mais vous pouvez utiliser le menu déroulant pour sélectionner l’icône que vous avez sélectionnée pour ajouter une touche visuelle supplémentaire aux liens du menu. En plus de plusieurs options de personnalisation et d’insertion d’icônes de menu, la version Premium vous permet d’utiliser un nombre illimité d’icônes personnalisées, de générer un conteneur d’icônes à utiliser sur la page d’atterrissage et de tirer parti du support Widget intégré pour toutes les icônes. Pour toute question ou suggestion dont vous pourriez avoir besoin, vous pouvez également obtenir un soutien avancé pour obtenir un look personnalisé très spécifique. Bien que le plug – in gratuit offre l’option de base pour l’insertion rapide et facile des polices d’icônes, la version avancée vous permet de passer au niveau suivant. Pour seulement 29 $, ce serait très pratique si vous n’avez qu’un seul site WordPress et que les licences des développeurs et des entreprises peuvent être utilisées sur plusieurs sites. Les polices d’icônes d’emballage sont un excellent moyen d’ajouter des optimisations visuelles supplémentaires au site sans ralentir le temps de chargement, vous forcer à créer des images spécifiques à la rétine, ou vous inquiéter des problèmes de redimensionnement d’image. Heureusement, il existe également des sources de haute qualité pour les paquets d’icônes de police gratuits sur le Web, comme icomoon et Fon.
C’est incroyable. L’utilisation de l’icône WP SVG plug – in gratuit est presque facile pour les utilisateurs qui veulent vraiment configurer l’icône rapidement et facilement sur leur site sans avoir à se soucier du Code. Si vous voulez faire un saut qualitatif, il vaut la peine d’explorer la version avancée du plug – in. Si vous souhaitez en savoir plus sur l’utilisation des icônes, sélectionnez « ajouter des icônes de médias sociaux à WordPress en utilisant CSS genie» et si vous souhaitez lire les polices, lisez comment trouver, sélectionner et installer de belles polices sur le site WordPress (avec des exemples). Nous aimerions connaître votre point de vue sur cette question. Utilisez – vous actuellement des polices d’icônes sur le site WordPress? Ou tu vas le faire? Partagez vos conseils dans les commentaires ci – dessous. Étiquettes: icônes de caractères WP SVG