L'utilisation d'une police à base d'images peut être un moyen amusant et rapide d'implémenter des icônes sur votre site. C'est un processus très simple qui vous laisse une totale liberté pour redimensionner vos icônes à tout moment.
Aujourd'hui, nous utiliserons l'excellente police Pictos pour créer une page Web simple vous permettant de vous familiariser avec le processus.
Utiliser une police pour les icônes
Le contrat de conception de cette semaine comprend la police géniale Pictos, qui contient 96 icônes minimales parfaitement adaptées à la conception Web. L'avantage de cette police est que vous obtenez non seulement une version imprimée, mais également un dossier contenant divers formats, à utiliser également sur le Web.
Cela signifie que nous pouvons facilement utiliser @ font-face pour incorporer la police Pictos dans un site, puis utiliser les icônes à la place des images. Juste au cas où vous seriez un peu confus sur la façon dont cela est fait, je voulais vous concocter un tutoriel rapide qui décrit votre implémentation de base de la police.
Même si vous êtes assez nouveau pour CSS, cela devrait être un jeu d'enfant. À certains égards, il est en fait plus facile que de travailler avec des images! Commençons.
HTML et CSS de base
La première chose à faire est de démarrer un kit de base avec un fichier HTML et un fichier CSS. Le code ci-dessous est ce avec quoi je commence habituellement.
CSS
Pour de petits projets comme celui-ci, je n'aime pas jouer avec les énormes réinitialisations. Si vous préférez quelque chose de plus complet, n'hésitez pas à l'inclure.
Corps CSS
Pour le corps, il suffit de définir la taille de la police de base et d'appliquer une image d'arrière-plan. Je voulais quelque chose de subtil mais d’attrayant alors j’ai naturellement arrêté par Subtle Patterns et téléchargé les «taches de rousseur subtiles». texture. Ce site est incroyable et devient rapidement l’un de mes objectifs incontournables pour la conception rapide de ressources.
Tout ce que vous avez à faire est d’appliquer le fichier téléchargé à l’arrière-plan et de le définir pour le répéter.
Paragraphe d'introduction
La première chose que nous allons ajouter à la page est un paragraphe d'introduction. Nous allons imaginer que nous construisons une page pour une application Web appelée "Anchorrr". Dans cet esprit, insérez le code HTML suivant.
Comme vous pouvez le constater, il n’ya pas grand-chose ici, mais juste un conteneur avec une div qui contient un en-tête et un paragraphe. Appelons cela pour qu'il soit beau.
Intro Paragraph CSS
Pour styler cette section, nous commençons par appliquer une largeur et une marge au conteneur. Nous utilisons auto les marges pour centrer le conteneur dans le corps et débordement caché pour aider à nettoyer les flotteurs que nous allons utiliser.
Ensuite, nous appliquons une largeur à la intro div et le faire flotter à gauche. J'ai utilisé un peu de sténographie pour le Police de caractère propriété de garder les choses bien et concis. Notez que le hauteur de la ligne n'a pas une unité associée, en savoir plus à ce sujet ici.
Comme vous pouvez le voir dans l'aperçu ci-dessus, ma version contenait en fait un lien qui nécessitait un style supplémentaire:
La grande ancre
Ensuite, nous voulons ajouter une grande image d’une ancre, qui réside dans notre police Pictos. La première chose à faire est d'intégrer la police dans notre CSS, puis d'insérer l'ancre dans notre code HTML et, enfin, de la redéfinir en CSS.
Incorporer la police Pictos
Heureusement, la police est livrée avec un extrait spécialement conçu pour cette tâche. Notre travail ici est donc incroyablement minimal. Tout ce que vous avez à faire est de déplacer les fichiers de police dans le dossier de votre projet et de coller les éléments suivants dans votre fichier CSS.
Insérer l'ancre dans votre code HTML
Comme incorporer la police, insérer le caractère ne pourrait pas être plus facile. Tout ce que nous avons à faire est de parcourir la carte de caractères ci-dessous pour trouver l'image que nous voulons, puis de taper cette lettre dans un paragraphe de notre code CSS.
Comme vous pouvez le constater, l’ancre peut être implémentée via la minuscule? A? dans la police. Voici comment nous implémentons cela dans notre code HTML.
Facile non? Initialement, il se présentera simplement en minuscule? A?, Alors passons à notre CSS pour le styler.
Style de l'ancre
Pour transformer notre simple lettre en icône, nous devons nous assurer que la police est définie sur la police Pictos que nous avons précédemment intégrée. Notez que, puisque c’est en fait le type avec lequel nous travaillons, nous pouvons positionner l’ancre verticalement via le hauteur de la ligne propriété. J'ai joué avec différentes valeurs jusqu'à ce que je trouve quelque chose qui avait l'air correct.
J'ai également appliqué un peu de magie CSS3 pour que l'ancre soit jolie. Un peu de RGBa m'a permis de rendre l'ancre légèrement transparente et un blanc ombre de texte lui donne un indice d'un effet typographique.
Avec cela, notre section supérieure est très belle! Notre ancre est en place et fonctionne parfaitement.
Ligne de séparation
Avant de commencer la section suivante, je souhaite créer une division visuelle claire avec une ligne continue. Comme le contenu que nous venons de présenter est entièrement emballé dans un joli conteneur, il est assez facile à faire avec une simple bordure.
Comme avec l'icône d'ancrage, j'ai combiné les bord inférieur avec une ombre pour lui donner un peu plus de dimension.
Le résultat est un diviseur simple et efficace entre nos deux sections.
Ajout des trois colonnes
La section suivante contiendra trois colonnes de texte et simulera vos caractéristiques typiques? section sur un site d'application Web. Naturellement, nous voudrons également inclure quelques repères visuels et notre police Pictos est l'outil idéal pour cela.
Caractéristiques HTML
La première étape consiste à implémenter le balisage de base pour nos trois colonnes. Nous allons utiliser trois paragraphes et en haut chacun avec un h3 qui tiendra les icônes. Je suis allé chercher quelques bonnes lettres, n'hésitez pas à choisir les vôtres pour obtenir un effet différent.
Chaque colonne reçoit la même classe afin que nous puissions les styler toutes ensemble. La dernière ajoute une classe supplémentaire afin que nous puissions supprimer facilement les marges.
Caractéristiques: CSS de base
Pour commencer avec la section de fonctionnalités CSS, nous avons simplement besoin de CSS super basique, comme nous l’avions déjà utilisé. À ce stade, tout cela devrait être parfaitement logique.
Notez que, une fois encore, j’ai implémenté la police Pictos, mais uniquement sur le h3 Mots clés.
Caractéristiques: colonne CSS
Je règle la largeur de cette page assez arbitrairement, ce qui peut rendre la mise en œuvre des colonnes un peu délicate. Les systèmes de grille utilisent des valeurs telles que 960px car ils sont faciles à diviser en plusieurs variantes de colonne.
Cependant, créer votre propre système de colonnes à la volée est assez facile. En fait, j'ai couvert ce sujet dans un article récent. Nous allons utiliser cette même technique ci-dessous.
Fondamentalement, nous commençons avec 100% de largeur. Si nous voulons une marge de droite de 4% appliquée à deux des colonnes, nous sommes ramenés à 92%. Nous divisons cela par trois colonnes pour obtenir environ 30,66667%, ce qui correspond à la largeur de notre colonne. Cela distribuera automatiquement trois colonnes sur la largeur du conteneur.
Comme vous pouvez le voir dans l'aperçu ci-dessous, nos colonnes ont été assez impressionnantes. Chacun est surmonté d'une jolie petite icône, ce qui ajoute un intérêt visuel considérable à la page.
La démo
Avec cela, notre page Web est tout fini. En utilisant uniquement le CSS, nous avons pu implémenter de belles icônes avec facilité, aucune image requise! Comme vous pouvez l’imaginer, l’utilisation de cette technique sur un site très volumineux pourrait faire gagner un temps considérable. La meilleure partie est qu’une fois que vous avez chargé la police une seule fois, vous êtes prêt à partir et pouvez facilement accéder à l’une des icônes qu’il contient.
Démo en direct: Cliquez ici
Conclusion
En résumé, l’utilisation d’une police à base d’image, telle que Pictos, peut s'avérer une excellente astuce pour placer des icônes sur votre site avec très peu d’effort. Utilisez simplement @ font-face pour incorporer la police et insérer / styler les icônes comme vous le feriez pour tout autre texte.
Si vous souhaitez mettre la main sur la police Pictos, rendez-vous à la page de nos offres. Soyez rapide, notre offre se termine le lundi 25 juillet!