Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Installer les icônes font-awesome

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous allez aborder les jeux d'icônes font-awesome. Apprenez aussi à intégrer ces icônes dans votre site.

Transcription

Dans la page web que nous devons créer, nous allons avoir besoin de plusieurs icônes. vous en avez d'ailleurs trois, ici, devant les yeux, qui se trouvent toutes les trois dans l'en-tête du site. Alors, pour créer ces icônes, eh bien, je pourrais les exporter une à une de mon fichier Photoshop, et je me retrouverais avec trois images différentes, une image par icône. Alors, cette technique fonctionne très, très bien, mais elle a des inconvénients majeurs, spécifiquement dans ce cas, d'ailleurs, puisque l'image a une taille fixe. Or, nous avons besoin de créer ici une page en Responsive design, c'est-à-dire une page qui s'adapte à la largeur de l'écran. On a donc besoin d'éléments fluides, sur notre site, et non pas d'élément fixes, donc en Responsive design, on va essayer, autant que possible, d'éviter d'utiliser des images. Alors un second inconvénient, c'est que ces trois icônes que vous voyez ici, eh bien ce sont, en réalité, des boutons, qui sont impliqués dans un effet de survol. Vous voyez d'aileurs, que l'icône du centre n'a pas la même couleur que les autres, eh bien ça, c'est une manière pour le designer, de m'indiquer l'effet de survol qu'il a envie que j'implémente pour les trois icones. J'ai donc besoin, en réalité, de deux images par bouton. Une image pour l'état normal du bouton, et une seconde image pour l'état survolé du bouton, vous faites le calcul, ça fait déjà six images rien que pour ces trois icônes. Alors, je vais utiliser pour ça une autre technique. Une technique qui m'a d'ailleurs été suggérée directement par le designer, puisque le desginer m'a dit que ces icônes, proviennent de la police de caractères Font Awesome. Alors je suis ici sur le site fontawesome.io, Et je vais vous montrer ces icônes qui se trouvent dans cette police de caractère. Donc je vais aller dans le lien icône qui se trouve ici, et regardez cette page, vous avez des tas d'icônes qui sont disponibles dans cette police de caractères parmi ces dizaines d'icônes, eh bien celle dont on va avoir besoin. Donc, plutôt que d'aller chercher ces icônes dans des fichiers images, eh bien, je vais aller chercher ces icônes, en tant que caractères dans une police de caractères. Donc ça, ça va me permettre, eh bien, de modifier la taille de ces caractères en CSS, ou encore la couleur de ces caractères en CSS. Eh bien comme, je modifie la taille ou la couleur de caractères normaux, dans une police de caractère normale, donc. Je vais donc me rendre sur la page d'accueil de ce site, pour cliquer sur le gros bouton download ici. Alors, pour gagner un petit peu de temps, j'ai déjà téléchargé ceci. Donc, ça se trouve mes téléchargements, dans mes fichiers zip, et donc, quand je dézip ce fichier, eh bien, je retrouve plusieurs choses, je retrouve d'abord un dossier CSS, avec deux feuilles de style, en fait, c'est deux fois la même feuille de style, mais une fois en normal et une fois un minifié, vous le voyez. Et puis, je retrouve également la police de caractères Font Awesome, dans différents formats. Eh bien oui, les navigateurs ne sont pas encore d'accord sur le format à utiliser. Donc on va leur donner tous les formats, et ils choisiront là dedans le format qu'ils ont envie d'utiliser, celui qu'ils supportent, donc. Alors, je vais prendre ici toutes ces polices de caractères ici, du téléchargement de Font Awesome, et je vais aller les déplacer dans le dossier Fonts ici, de mon site. Je vais faire la même chose avec le fichier CSS, alors, je vais prendre la version minifiée puisqu'elle pèse moins lourd, elle est moins grosse, donc je vais prendre ce fichier, et venir le déplacer dans le dossier CSS de mon site. Je retourne maintenant dans mon éditeur de code, je retourne au niveau de Brackets. Et là, vous voyez au niveau du dossier Fonts, toutes les polices de caractères, et au niveau du dossier CSS, eh bien, le fichier que j'ai copié ici dans ce dossier CSS. Eh bien, on va un petit peu regarder ce dossier CSS, d'ailleurs. Il est minifié, donc pas très lisible. Cela dit, vous pouvez quand même regarder ici, au dessus, qu'il y a l'adresse des différents fichiers de polices de caractères, ici dans ce fichier CSS, donc vérifiez bien, que ces adresses ici correspondent à la hiérachie des dossiers dans votre site, donc que le dossier Fonts, ici, soit orthographié de la même façon, avec les mêmes minuscules, majuscules, donc dans mon cas, ça devrait marcher. Alors, la dernière chose à faire pour intégrer cette police de caractères, eh bien, c'est de se rendre sur la page index.html, et d'ajouter, ici dans le head, une balise link, qui va aller charger une feuille de style, Une feuille de style qui se trouve dans le dossier CSS, et qui s'appelle font-awesome.min.css comme ceci. Voilà, Font Awesome a été téléchargé et intégré dans mon site, dans une prochaine vidéo, je montrerai comment on peut aller chercher des icônes, dans cette police de caractère.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Passez d’une maquette au format Photoshop vers une page web interactive en HTML5 et CSS. Découvrez des outils et des techniques indispensables dans votre travail d’intégrateur.

3h16 (43 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !