1 00:00:02,790 --> 00:00:06,440 Passons maintenant à notre prochain exercice, 2 00:00:06,440 --> 00:00:09,225 où nous allons en apprendre plus sur les polices Icône. 3 00:00:09,225 --> 00:00:11,435 Nous allons télécharger Font Awesome, 4 00:00:11,435 --> 00:00:16,195 puis l'inclure dans la conception de notre site Web. 5 00:00:16,195 --> 00:00:20,800 Et aussi, nous allons télécharger bootstrap social et la 6 00:00:20,800 --> 00:00:27,360 conception de certains brevets sociaux à inclure dans le terrain. 7 00:00:27,360 --> 00:00:35,450 Pour commencer, allez dans le dossier de confusion dans votre fenêtre de terminal, 8 00:00:35,450 --> 00:00:40,310 et nous allons utiliser npm pour aller chercher Font Awesome pour nous. 9 00:00:40,310 --> 00:00:49,475 Donc, à l'invite, tapez npm install font-awesome moins save. 10 00:00:49,475 --> 00:00:53,930 Donc, cela va chercher Font Awesome dans notre dossier personne. 11 00:00:53,930 --> 00:01:00,825 Et en même temps, il ajoutera Font Awesome à notre fichier package.json en tant que dépendance. 12 00:01:00,825 --> 00:01:02,910 Une fois que Font Awesome est récupéré, 13 00:01:02,910 --> 00:01:08,215 alors nous pouvons aller de l'avant pour en faire usage sur notre site Web. 14 00:01:08,215 --> 00:01:16,100 L' étape suivante consiste à récupérer le social bootstrap et à l'installer dans notre projet. 15 00:01:16,100 --> 00:01:18,980 Donc pour ce faire, à l'invite, tapez npm 16 00:01:18,980 --> 00:01:27,090 installer bootstrap-social @5 .1.1 17 00:01:29,130 --> 00:01:31,645 moins save. 18 00:01:31,645 --> 00:01:37,630 Et cela va chercher bootstrap social et l'installer dans notre projet. 19 00:01:37,630 --> 00:01:41,460 Maintenant, nous devons utiliser cette police cinq, 20 00:01:41,460 --> 00:01:45,760 c'est la Font Awesome, et le social bootstrap sur notre site Web. 21 00:01:45,760 --> 00:01:51,485 Donc, en allant à index.html en haut, 22 00:01:51,485 --> 00:01:54,605 juste avant le fichier style.css, 23 00:01:54,605 --> 00:02:00,125 je vais importer à la fois Font Awesome et Bootstrap social. 24 00:02:00,125 --> 00:02:04,325 Donc, juste là, tapez le lien 25 00:02:04,325 --> 00:02:12,440 rel stylesheet href 26 00:02:12,900 --> 00:02:22,830 node_modules/font-awesome/css/font-awesome.main.css Donc, 27 00:02:35,820 --> 00:02:45,080 importons cela dans notre fichier index.html de la même manière, 28 00:02:46,050 --> 00:02:57,380 étant donné l'importation du social bootstrap. 29 00:03:00,460 --> 00:03:07,760 Donc node_modules/bootstrap-social/bootsrap-social.css. 30 00:03:07,760 --> 00:03:13,995 Donc, ces deux que nous allons inclure dans notre index.html. 31 00:03:13,995 --> 00:03:21,960 De même, j'ai besoin d'inclure les deux dans mon aboutus.html Alors laissez-moi copier cela et 32 00:03:21,960 --> 00:03:29,995 passer à aboutus.html, puis collez cela dans la aboutus.html aussi. 33 00:03:29,995 --> 00:03:37,180 Maintenant, en revenant à index.html, nous n'allons pas utiliser les icônes Font Awesome, 34 00:03:37,180 --> 00:03:43,060 ainsi que les icônes sociales bootstrap dans notre page index.html. 35 00:03:43,060 --> 00:03:48,485 Aller à cette barre de navigation dans la page index.html, 36 00:03:48,485 --> 00:03:53,770 juste dans ce lien pour leur page d'accueil, 37 00:03:53,770 --> 00:03:59,840 je vais entrer et ajouter ce code Font Awesome. 38 00:03:59,840 --> 00:04:06,430 Donc, je vais dire la classe de travée fa fa-home. 39 00:04:06,430 --> 00:04:10,615 Donc, la fa dit que j'applique la classe Font Awesome, la 40 00:04:10,615 --> 00:04:14,550 maison fa est l'icône spécifique pour l'icône d'accueil. C' 41 00:04:14,550 --> 00:04:18,215 est donc ce que je voulais utiliser sur ma page d'accueil. 42 00:04:18,215 --> 00:04:26,190 Et puis fermez la balise de travé- puis après l'espace, le bouton d'accueil. 43 00:04:26,190 --> 00:04:30,265 Donc, cela inclura l'icône d'accueil là-dedans. 44 00:04:30,265 --> 00:04:36,945 Je vais copier ceci et puis pour le sujet, 45 00:04:36,945 --> 00:04:42,895 je vais utiliser la même chose mais au lieu de fa-home, 46 00:04:42,895 --> 00:04:46,610 alors remarquez donner un espace entre la balise span de fermeture et 47 00:04:46,610 --> 00:04:51,100 environ et au lieu de fa-home je dirais fa-info. 48 00:04:51,100 --> 00:04:55,280 Maintenant ceux-ci, j'ai compris que ce sont les icônes que je veux utiliser. 49 00:04:55,280 --> 00:05:00,110 Vous pouvez consulter la documentation Font Awesome pour 50 00:05:00,110 --> 00:05:04,820 savoir quelles icônes particulières et comment vous les incluez. 51 00:05:04,820 --> 00:05:09,610 Pour le menu, j'utiliserai une icône de liste là-bas. 52 00:05:09,610 --> 00:05:15,840 J' appelle cette icône comme fa-list. 53 00:05:15,840 --> 00:05:20,400 Maintenant, aussi je vais utiliser des icônes de plus grande taille. 54 00:05:20,400 --> 00:05:23,160 Donc, je vais également inclure fa-lg 55 00:05:23,160 --> 00:05:32,890 dans les classes d'icônes fa-lg. 56 00:05:32,890 --> 00:05:39,345 Maintenant, pour le contact, je vais utiliser fa-home, 57 00:05:39,345 --> 00:05:49,095 puis si c'est fa-address-card fa-lg et enregistrer les changements. 58 00:05:49,095 --> 00:05:51,465 Vous devriez répéter la même chose, 59 00:05:51,465 --> 00:05:56,220 l'ajout des mêmes icônes même dans la page aboutus.html, 60 00:05:56,220 --> 00:06:01,880 puis nous allons jeter un oeil à notre page Web après avoir terminé les modifications. 61 00:06:01,880 --> 00:06:09,350 Après avoir modifié aussi aboutus.html et index.html y compris les icônes, 62 00:06:09,350 --> 00:06:14,675 j'ai enregistré les modifications et puis je suis ici sur ma page web et notez 63 00:06:14,675 --> 00:06:21,150 comment ces icônes ont été incluses dans ma barre de navigation. 64 00:06:21,150 --> 00:06:24,890 Ainsi, vous pouvez voir qu'il y a une icône d'accueil devant la maison, 65 00:06:24,890 --> 00:06:27,885 il y a une icône d'info devant environ, 66 00:06:27,885 --> 00:06:32,525 une icône de liste devant le menu et une icône de carte d'adresse devant le contact. 67 00:06:32,525 --> 00:06:39,195 C' est donc une belle façon d'ajouter des éléments visuels dans votre page Web. 68 00:06:39,195 --> 00:06:40,800 Maintenant, c'est merveilleux. 69 00:06:40,800 --> 00:06:47,590 Maintenant, ce que je veux faire, c'est travailler sur la mise à jour des séquences. 70 00:06:47,590 --> 00:06:53,250 Maintenant, je veux remplacer le fax téléphonique et l'e-mail par des icônes et 71 00:06:53,250 --> 00:06:59,370 aussi transformer tous ces boutons en boutons de médias sociaux ici. 72 00:06:59,370 --> 00:07:03,810 Donc, pour ce faire, nous allons utiliser Font Awesome pour cela, 73 00:07:03,810 --> 00:07:08,440 et ensuite nous allons utiliser Bootstrap social pour cela. 74 00:07:08,440 --> 00:07:11,720 Aller au pied de page de la page index.html, 75 00:07:11,720 --> 00:07:19,610 je vais remplacer le téléphone par l'icône Font Awesome. 76 00:07:19,610 --> 00:07:22,930 Donc, je dirais, « i » comme je l'ai mentionné, 77 00:07:22,930 --> 00:07:29,130 vous pouvez soit utiliser span ou I pour spécifier les icônes Font Awesome. 78 00:07:29,130 --> 00:07:34,820 Font Awesome site utilise I mais je vous montre deux façons possibles de faire ces choses. 79 00:07:34,820 --> 00:07:41,230 Donc, je dis fa fa-tel, 80 00:07:41,230 --> 00:07:52,260 Je suis désolé fa-phone et fermer l' étiquette ici. 81 00:07:53,270 --> 00:07:58,985 Et pour le fax, je vais simplement copier ceci, 82 00:07:58,985 --> 00:08:07,550 puis pour le fax si c'est fa-fax, 83 00:08:07,550 --> 00:08:17,705 et pour le courrier électronique c'est fa-enveloppe et enregistrer les modifications. 84 00:08:17,705 --> 00:08:24,485 Maintenant, appliquez la même chose à la page aboutus.html. 85 00:08:24,485 --> 00:08:26,210 En allant sur ma page web, 86 00:08:26,210 --> 00:08:29,765 vous remarquez immédiatement que le téléphone, le fax 87 00:08:29,765 --> 00:08:34,420 et l'e-mail, sont maintenant remplacés par les icônes correspondantes. 88 00:08:34,420 --> 00:08:37,735 Maintenant, la dernière étape consiste à utiliser bootstrap social pour remplacer 89 00:08:37,735 --> 00:08:41,550 tous ces liens par les boutons des médias sociaux. 90 00:08:41,550 --> 00:08:43,350 Pour cela, 91 00:08:43,350 --> 00:08:47,835 nous allons aller au pied de page et ensuite remplacer chacun d'entre 92 00:08:47,835 --> 00:08:53,400 eux par leurs icônes correspondantes. 93 00:08:53,400 --> 00:08:57,345 Donc, je dirais, je classe 94 00:08:57,345 --> 00:09:06,545 Font Awesome fa-google-plus et 95 00:09:06,545 --> 00:09:09,255 fermer l' étiquette là. 96 00:09:09,255 --> 00:09:16,170 Et puis je vais simplement copier ceci et ensuite appliquer la même chose aux autres. 97 00:09:16,170 --> 00:09:21,660 Donc, je vais dire, Facebook, 98 00:09:28,330 --> 00:09:38,400 LinkedIn, Twitter, 99 00:09:44,910 --> 00:09:51,860 YouTube, et enfin pour le courrier, je vais 100 00:09:51,860 --> 00:09:59,865 utiliser une icône d'enveloppe là-bas. 101 00:09:59,865 --> 00:10:07,250 En outre, pour transformer cela en brevets sociaux bootstrap aux balises A, 102 00:10:07,250 --> 00:10:16,150 nous devrions appliquer les classes en tant qu'icône bouton bouton social, 103 00:10:16,150 --> 00:10:24,870 puis bouton-google faire de même pour les autres. 104 00:10:24,870 --> 00:10:30,255 Pour le second, ce serait Facebook, 105 00:10:30,255 --> 00:10:38,690 puis LinkedIn, 106 00:10:44,970 --> 00:10:52,370 Twitter, Google et puis pour le dernier, 107 00:10:52,370 --> 00:11:02,985 puisque nous n'avons pas de bouton d'icône sociale bootstrap correspondant pour le courrier, 108 00:11:02,985 --> 00:11:08,130 nous n'aurons rien à part les icônes sociales bouton. 109 00:11:08,130 --> 00:11:13,170 Maintenant, avec ça, allons jeter un coup d'oeil à notre pied de page. 110 00:11:13,170 --> 00:11:16,720 Aller à votre pied de page, vous pouvez maintenant voir tous les boutons ont 111 00:11:16,720 --> 00:11:20,505 été transformés en leurs boutons sociaux correspondants là-bas. 112 00:11:20,505 --> 00:11:25,720 Faisons la même modification au pied de page dans aboutus.html. 113 00:11:25,720 --> 00:11:33,125 Donc, je suis juste en train de copier ce code là, puis d'aller à aboutus.html, 114 00:11:33,125 --> 00:11:41,675 puis simplement en remplaçant cela dans le pied de page de aboutus.html. 115 00:11:41,675 --> 00:11:46,415 Avec cela, jetons un dernier coup d'oeil à notre page web. 116 00:11:46,415 --> 00:11:48,050 En allant sur notre page Web, 117 00:11:48,050 --> 00:11:49,635 vous pouvez voir que maintenant 118 00:11:49,635 --> 00:11:56,030 tous les liens de médias sociaux là-bas ont été transformés en boutons de médias sociaux là-bas. 119 00:11:56,030 --> 00:11:58,945 Aller à la page à propos, 120 00:11:58,945 --> 00:12:03,660 vous verrez la même chose dans la page à propos aussi. 121 00:12:03,660 --> 00:12:07,340 Maintenant que vous avez terminé cet exercice, 122 00:12:07,340 --> 00:12:16,560 cela peut être un bon moment pour faire un bon commit avec le message, les polices d'icône.