1 00:00:02,790 --> 00:00:06,440 Passiamo ora al nostro prossimo esercizio, 2 00:00:06,440 --> 00:00:09,225 dove impareremo di più sui font Icon. 3 00:00:09,225 --> 00:00:11,435 Scaricheremo Font Awesome, 4 00:00:11,435 --> 00:00:16,195 e quindi includerlo nel nostro design del sito web. 5 00:00:16,195 --> 00:00:20,800 E inoltre scaricheremo bootstrap social e 6 00:00:20,800 --> 00:00:27,360 progetteremo alcuni brevetti sociali da includere nel campo. 7 00:00:27,360 --> 00:00:35,450 Per iniziare, vai alla cartella confusione nella finestra del terminale, 8 00:00:35,450 --> 00:00:40,310 e useremo npm per andare a recuperare Font Awesome per noi. 9 00:00:40,310 --> 00:00:49,475 Quindi, al prompt, digita npm install font-awesome meno meno salva. 10 00:00:49,475 --> 00:00:53,930 Quindi questo recupererà Font Awesome nella nostra cartella nessuno. 11 00:00:53,930 --> 00:01:00,825 E allo stesso tempo, aggiungerà Font Awesome al nostro file package.json come dipendenza. 12 00:01:00,825 --> 00:01:02,910 Una volta che Font Awesome è recuperato, 13 00:01:02,910 --> 00:01:08,215 allora possiamo andare avanti per farne uso nel nostro sito web. 14 00:01:08,215 --> 00:01:16,100 Il prossimo passo è quello di recuperare il social bootstrap e installarlo nel nostro progetto. 15 00:01:16,100 --> 00:01:18,980 Quindi, per farlo, al prompt digitare npm 16 00:01:18,980 --> 00:01:27,090 installa bootstrap-social @5 .1.1 17 00:01:29,130 --> 00:01:31,645 meno salva. 18 00:01:31,645 --> 00:01:37,630 E questo recupererà bootstrap social e lo installerà nel nostro progetto. 19 00:01:37,630 --> 00:01:41,460 Ora, abbiamo bisogno di usare questo font cinque, 20 00:01:41,460 --> 00:01:45,760 è il Font Awesome, e il bootstrap social nel nostro sito web. 21 00:01:45,760 --> 00:01:51,485 Quindi andando a index.html proprio in alto, 22 00:01:51,485 --> 00:01:54,605 poco prima del file style.css, 23 00:01:54,605 --> 00:02:00,125 ho intenzione di importare sia Font Awesome che bootstrap social. 24 00:02:00,125 --> 00:02:04,325 Quindi, proprio lì, cerchiamo di digitare il link 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 Quindi cerchiamo di 27 00:02:35,820 --> 00:02:45,080 importare questo nel nostro file index.html in modo simile, 28 00:02:46,050 --> 00:02:57,380 dato importare il bootstrap social. 29 00:03:00,460 --> 00:03:07,760 Quindi node_modules/bootstrap-social/bootsrap-social.css. 30 00:03:07,760 --> 00:03:13,995 Quindi questi due includeremo nel nostro index.html. 31 00:03:13,995 --> 00:03:21,960 Allo stesso modo, ho bisogno di includere entrambi questi nel mio aboutus.html Quindi lasciami copiare e 32 00:03:21,960 --> 00:03:29,995 passare a aboutus.html e poi incollarlo anche nel aboutus.html. 33 00:03:29,995 --> 00:03:37,180 Ora, tornando a index.html non useremo le icone Font Awesome, 34 00:03:37,180 --> 00:03:43,060 e anche le icone social bootstrap nella nostra pagina index.html. 35 00:03:43,060 --> 00:03:48,485 Andando a quella barra di navigazione nella pagina index.html, 36 00:03:48,485 --> 00:03:53,770 proprio in questo link per la loro homepage, 37 00:03:53,770 --> 00:03:59,840 entrerò e aggiungerò quel codice Font Awesome. 38 00:03:59,840 --> 00:04:06,430 Quindi dirò span classe fa fa-home. 39 00:04:06,430 --> 00:04:10,615 Così la fa dice che sto applicando la classe Font Awesome, 40 00:04:10,615 --> 00:04:14,550 fa casa è l'icona specifica per l'icona di casa. 41 00:04:14,550 --> 00:04:18,215 Così questo è quello che volevo usare sulla mia homepage. 42 00:04:18,215 --> 00:04:26,190 E poi chiudere il tag span e poi dopo lo spazio, il pulsante home. 43 00:04:26,190 --> 00:04:30,265 Quindi questo includerà l'icona di casa lì dentro. 44 00:04:30,265 --> 00:04:36,945 Ho intenzione di copiare questo e poi per il about, 45 00:04:36,945 --> 00:04:42,895 ho intenzione di usare la stessa cosa ma invece di fa-home, 46 00:04:42,895 --> 00:04:46,610 quindi notare dare uno spazio tra il tag span di chiusura 47 00:04:46,610 --> 00:04:51,100 e circa e invece di fa-home direi fa-info. 48 00:04:51,100 --> 00:04:55,280 Ora questi, ho capito che queste sono le icone che voglio usare. 49 00:04:55,280 --> 00:05:00,110 Puoi controllare la documentazione Font Awesome per 50 00:05:00,110 --> 00:05:04,820 scoprire quali icone particolari e come includerle. 51 00:05:04,820 --> 00:05:09,610 Per il menu userò un'icona della lista lì. La 52 00:05:09,610 --> 00:05:15,840 chiamo icona come fa-list. 53 00:05:15,840 --> 00:05:20,400 Ora, anche io ho intenzione di utilizzare icone di dimensioni più grandi. 54 00:05:20,400 --> 00:05:23,160 Quindi includerò anche fa-lg 55 00:05:23,160 --> 00:05:32,890 nelle classi di icone fa-lg. 56 00:05:32,890 --> 00:05:39,345 Ora per il contatto ho intenzione di usare fa-home, 57 00:05:39,345 --> 00:05:49,095 e poi se questo è fa-address-card fa-lg e salvare le modifiche. 58 00:05:49,095 --> 00:05:51,465 Si dovrebbe ripetere lo stesso, 59 00:05:51,465 --> 00:05:56,220 aggiunta delle stesse icone anche nella pagina aboutus.html, 60 00:05:56,220 --> 00:06:01,880 e poi daremo un'occhiata alla nostra pagina web dopo aver completato le modifiche. 61 00:06:01,880 --> 00:06:09,350 Dopo aver modificato anche aboutus.html e index.html incluse le icone, 62 00:06:09,350 --> 00:06:14,675 ho salvato le modifiche e poi eccomi nella mia pagina web e nota 63 00:06:14,675 --> 00:06:21,150 come queste icone sono state incluse nella mia barra di navigazione. 64 00:06:21,150 --> 00:06:24,890 Quindi puoi vedere che c'è un'icona di casa davanti a casa, 65 00:06:24,890 --> 00:06:27,885 c'è un'icona di informazioni davanti a circa, 66 00:06:27,885 --> 00:06:32,525 un'icona di elenco davanti al menu e un'icona della scheda di indirizzo davanti al contatto. 67 00:06:32,525 --> 00:06:39,195 Quindi questo è un bel modo di aggiungere alcuni elementi visivi nella tua pagina web. 68 00:06:39,195 --> 00:06:40,800 Ora, questo è meraviglioso. 69 00:06:40,800 --> 00:06:47,590 Ora quello che voglio fare è lavorare per aggiornare il filmato. 70 00:06:47,590 --> 00:06:53,250 Ora, voglio sostituire il fax telefonico e l'e-mail con le icone e 71 00:06:53,250 --> 00:06:59,370 anche trasformare tutti questi in pulsanti sui social media qui. 72 00:06:59,370 --> 00:07:03,810 Quindi, per farlo, faremo uso di Font Awesome per questo, 73 00:07:03,810 --> 00:07:08,440 e poi faremo uso di bootstrap social per questo. 74 00:07:08,440 --> 00:07:11,720 Andando al piè di pagina della pagina index.html, 75 00:07:11,720 --> 00:07:19,610 sostituirò il telefono con l'icona Font Awesome. 76 00:07:19,610 --> 00:07:22,930 Quindi direi, «i» come ho detto, 77 00:07:22,930 --> 00:07:29,130 puoi usare span o io per specificare le icone Font Awesome. Il 78 00:07:29,130 --> 00:07:34,820 sito Web Font Awesome usa I ma ti sto mostrando due modi possibili per fare queste cose. 79 00:07:34,820 --> 00:07:41,230 Così dico fa fa-tel, 80 00:07:41,230 --> 00:07:52,260 Mi dispiace fa-phone e chiudere il tag qui. 81 00:07:53,270 --> 00:07:58,985 E per fax, ho intenzione di copiare semplicemente questo, 82 00:07:58,985 --> 00:08:07,550 e poi per fax se è fa-fax, 83 00:08:07,550 --> 00:08:17,705 e per e-mail è fa-envelope e salvare le modifiche. 84 00:08:17,705 --> 00:08:24,485 Ora applica lo stesso alla pagina aboutus.html. 85 00:08:24,485 --> 00:08:26,210 Andando alla mia pagina web, 86 00:08:26,210 --> 00:08:29,765 si nota immediatamente che il telefono, fax 87 00:08:29,765 --> 00:08:34,420 e e-mail, sono ora sostituiti con le icone corrispondenti. 88 00:08:34,420 --> 00:08:37,735 Ora l'ultimo passo è usare bootstrap social per sostituire 89 00:08:37,735 --> 00:08:41,550 tutti questi link con i pulsanti dei social media. 90 00:08:41,550 --> 00:08:43,350 Per farlo, 91 00:08:43,350 --> 00:08:47,835 andremo al piè di pagina e poi sostituiamo ciascuno di 92 00:08:47,835 --> 00:08:53,400 questi con le loro icone corrispondenti lì. 93 00:08:53,400 --> 00:08:57,345 Quindi direi, classe 94 00:08:57,345 --> 00:09:06,545 Font Awesome fa-google-plus e 95 00:09:06,545 --> 00:09:09,255 chiudo il tag lì. 96 00:09:09,255 --> 00:09:16,170 E poi ho semplicemente intenzione di copiare questo e quindi applicare lo stesso a quelli rimanenti. 97 00:09:16,170 --> 00:09:21,660 Quindi dirò, Facebook, 98 00:09:28,330 --> 00:09:38,400 LinkedIn, Twitter, 99 00:09:44,910 --> 00:09:51,860 YouTube, e infine per la posta 100 00:09:51,860 --> 00:09:59,865 userò un'icona a forma di busta lì. 101 00:09:59,865 --> 00:10:07,250 Inoltre, per trasformare questo in brevetti sociali bootstrap per i tag A, 102 00:10:07,250 --> 00:10:16,150 dovremmo applicare le classi come pulsante pulsante icona social, 103 00:10:16,150 --> 00:10:24,870 e quindi button-google facendo lo stesso a quelli rimanenti. 104 00:10:24,870 --> 00:10:30,255 Per il secondo sarebbe Facebook, 105 00:10:30,255 --> 00:10:38,690 poi LinkedIn, 106 00:10:44,970 --> 00:10:52,370 Twitter, Google e poi per l'ultimo, 107 00:10:52,370 --> 00:11:02,985 dal momento che non abbiamo un corrispondente pulsante di icona social bootstrap per la posta, 108 00:11:02,985 --> 00:11:08,130 non avremo nulla tranne le icone social dei pulsanti. 109 00:11:08,130 --> 00:11:13,170 Ora con questo, andiamo a dare un'occhiata veloce al nostro piè di pagina. 110 00:11:13,170 --> 00:11:16,720 Andando al tuo piè di pagina, ora puoi vedere tutti i pulsanti 111 00:11:16,720 --> 00:11:20,505 sono stati trasformati nei loro pulsanti social corrispondenti lì. 112 00:11:20,505 --> 00:11:25,720 Facciamo la stessa modifica al piè di pagina in aboutus.html. 113 00:11:25,720 --> 00:11:33,125 Quindi sto solo copiando quel codice lì e poi vado a aboutus.html, 114 00:11:33,125 --> 00:11:41,675 e poi semplicemente sostituendolo nel piè di pagina di aboutus.html. 115 00:11:41,675 --> 00:11:46,415 Con questo diamo un'ultima occhiata alla nostra pagina web. 116 00:11:46,415 --> 00:11:48,050 Andando alla nostra pagina web, 117 00:11:48,050 --> 00:11:49,635 puoi vedere che ora 118 00:11:49,635 --> 00:11:56,030 tutti i link dei social media lì sono stati trasformati in pulsanti dei social media lì. 119 00:11:56,030 --> 00:11:58,945 Andando alla pagina su, 120 00:11:58,945 --> 00:12:03,660 vedrai la stessa cosa anche nella pagina su. 121 00:12:03,660 --> 00:12:07,340 Ora che hai completato questo esercizio, 122 00:12:07,340 --> 00:12:16,560 questo potrebbe essere un buon momento per eseguire un buon commit con il messaggio, caratteri icona.