Passiamo ora al nostro prossimo esercizio,
dove impareremo di più sui font Icon.
Scaricheremo Font Awesome,
e quindi includerlo nel nostro design del sito web.
E inoltre scaricheremo bootstrap social e
progetteremo alcuni brevetti sociali da includere nel campo.
Per iniziare, vai alla cartella confusione nella finestra del terminale,
e useremo npm per andare a recuperare Font Awesome per noi.
Quindi, al prompt, digita npm install font-awesome meno meno salva.
Quindi questo recupererà Font Awesome nella nostra cartella nessuno.
E allo stesso tempo, aggiungerà Font Awesome al nostro file package.json come dipendenza.
Una volta che Font Awesome è recuperato,
allora possiamo andare avanti per farne uso nel nostro sito web.
Il prossimo passo è quello di recuperare il social bootstrap e installarlo nel nostro progetto.
Quindi, per farlo, al prompt digitare npm
installa bootstrap-social @5 .1.1
meno salva.
E questo recupererà bootstrap social e lo installerà nel nostro progetto.
Ora, abbiamo bisogno di usare questo font cinque,
è il Font Awesome, e il bootstrap social nel nostro sito web.
Quindi andando a index.html proprio in alto,
poco prima del file style.css,
ho intenzione di importare sia Font Awesome che bootstrap social.
Quindi, proprio lì, cerchiamo di digitare il link
rel stylesheet href
node_modules/font-awesome/css/font-awesome.main.css Quindi cerchiamo di
importare questo nel nostro file index.html in modo simile,
dato importare il bootstrap social.
Quindi node_modules/bootstrap-social/bootsrap-social.css.
Quindi questi due includeremo nel nostro index.html.
Allo stesso modo, ho bisogno di includere entrambi questi nel mio aboutus.html Quindi lasciami copiare e
passare a aboutus.html e poi incollarlo anche nel aboutus.html.
Ora, tornando a index.html non useremo le icone Font Awesome,
e anche le icone social bootstrap nella nostra pagina index.html.
Andando a quella barra di navigazione nella pagina index.html,
proprio in questo link per la loro homepage,
entrerò e aggiungerò quel codice Font Awesome.
Quindi dirò span classe fa fa-home.
Così la fa dice che sto applicando la classe Font Awesome,
fa casa è l'icona specifica per l'icona di casa.
Così questo è quello che volevo usare sulla mia homepage.
E poi chiudere il tag span e poi dopo lo spazio, il pulsante home.
Quindi questo includerà l'icona di casa lì dentro.
Ho intenzione di copiare questo e poi per il about,
ho intenzione di usare la stessa cosa ma invece di fa-home,
quindi notare dare uno spazio tra il tag span di chiusura
e circa e invece di fa-home direi fa-info.
Ora questi, ho capito che queste sono le icone che voglio usare.
Puoi controllare la documentazione Font Awesome per
scoprire quali icone particolari e come includerle.
Per il menu userò un'icona della lista lì. La
chiamo icona come fa-list.
Ora, anche io ho intenzione di utilizzare icone di dimensioni più grandi.
Quindi includerò anche fa-lg
nelle classi di icone fa-lg.
Ora per il contatto ho intenzione di usare fa-home,
e poi se questo è fa-address-card fa-lg e salvare le modifiche.
Si dovrebbe ripetere lo stesso,
aggiunta delle stesse icone anche nella pagina aboutus.html,
e poi daremo un'occhiata alla nostra pagina web dopo aver completato le modifiche.
Dopo aver modificato anche aboutus.html e index.html incluse le icone,
ho salvato le modifiche e poi eccomi nella mia pagina web e nota
come queste icone sono state incluse nella mia barra di navigazione.
Quindi puoi vedere che c'è un'icona di casa davanti a casa,
c'è un'icona di informazioni davanti a circa,
un'icona di elenco davanti al menu e un'icona della scheda di indirizzo davanti al contatto.
Quindi questo è un bel modo di aggiungere alcuni elementi visivi nella tua pagina web.
Ora, questo è meraviglioso.
Ora quello che voglio fare è lavorare per aggiornare il filmato.
Ora, voglio sostituire il fax telefonico e l'e-mail con le icone e
anche trasformare tutti questi in pulsanti sui social media qui.
Quindi, per farlo, faremo uso di Font Awesome per questo,
e poi faremo uso di bootstrap social per questo.
Andando al piè di pagina della pagina index.html,
sostituirò il telefono con l'icona Font Awesome.
Quindi direi, «i» come ho detto,
puoi usare span o io per specificare le icone Font Awesome. Il
sito Web Font Awesome usa I ma ti sto mostrando due modi possibili per fare queste cose.
Così dico fa fa-tel,
Mi dispiace fa-phone e chiudere il tag qui.
E per fax, ho intenzione di copiare semplicemente questo,
e poi per fax se è fa-fax,
e per e-mail è fa-envelope e salvare le modifiche.
Ora applica lo stesso alla pagina aboutus.html.
Andando alla mia pagina web,
si nota immediatamente che il telefono, fax
e e-mail, sono ora sostituiti con le icone corrispondenti.
Ora l'ultimo passo è usare bootstrap social per sostituire
tutti questi link con i pulsanti dei social media.
Per farlo,
andremo al piè di pagina e poi sostituiamo ciascuno di
questi con le loro icone corrispondenti lì.
Quindi direi, classe
Font Awesome fa-google-plus e
chiudo il tag lì.
E poi ho semplicemente intenzione di copiare questo e quindi applicare lo stesso a quelli rimanenti.
Quindi dirò, Facebook,
LinkedIn, Twitter,
YouTube, e infine per la posta
userò un'icona a forma di busta lì.
Inoltre, per trasformare questo in brevetti sociali bootstrap per i tag A,
dovremmo applicare le classi come pulsante pulsante icona social,
e quindi button-google facendo lo stesso a quelli rimanenti.
Per il secondo sarebbe Facebook,
poi LinkedIn,
Twitter, Google e poi per l'ultimo,
dal momento che non abbiamo un corrispondente pulsante di icona social bootstrap per la posta,
non avremo nulla tranne le icone social dei pulsanti.
Ora con questo, andiamo a dare un'occhiata veloce al nostro piè di pagina.
Andando al tuo piè di pagina, ora puoi vedere tutti i pulsanti
sono stati trasformati nei loro pulsanti social corrispondenti lì.
Facciamo la stessa modifica al piè di pagina in aboutus.html.
Quindi sto solo copiando quel codice lì e poi vado a aboutus.html,
e poi semplicemente sostituendolo nel piè di pagina di aboutus.html.
Con questo diamo un'ultima occhiata alla nostra pagina web.
Andando alla nostra pagina web,
puoi vedere che ora
tutti i link dei social media lì sono stati trasformati in pulsanti dei social media lì.
Andando alla pagina su,
vedrai la stessa cosa anche nella pagina su.
Ora che hai completato questo esercizio,
questo potrebbe essere un buon momento per eseguire un buon commit con il messaggio, caratteri icona.