Cette page est un autre fichier HTML,
différent du fichier page01.html
Pour cette page Web, il a fallu intégrer le code fourni par heropatterns.com dans la déclaration CSS de la classe bgimg et supprimer les déclarations inutiles pour ce type de motif. Un seul attribut CSS est nécessaire pour afficher la texture choisie sur le fond coloré paramétré auparavant (via les classes w3.css) :
.bgimg { background-image: url("data:image/svg+xml, etc.) }
L'icône Font Awesome présentée ci-contre est affichée en grande taille grâce à une classe du nom de l'icône (.fa-coffee
). Cette classe a été créée dans les styles personnalisés placés dans le <head>
. La
déclaration CSS de cette classe est : {font‑size: 170px}
.
La taille en pixels est déterminée par la place occupée par l'icône juste avant le point de rupture où le texte bascule sous l'icône. Si la taille de l'icône est trop grande, en approchant de ce point de rupture, le texte se superpose à l'image. Faites l'expérience en modifiant la taille de l'icône à 200px et en faisant varier la largeur de la fenêtre d'affichage. Vous constaterez alors la superposition du texte sur l'icône.
Les icônes utilisées dans les gabarits de w3schools utilisant w3.css sont celle de la version 4.7 de Font Awesome. Vous pouvez choisir les icônes parmi toutes celles présentées à cette adresse : fontawesome.com
Avec Internet, on peut faire le meilleur comme le pire. C'est la pratique qui compte
Alain Serres | Relevé sur dicocitations.lemonde.fr