Passons maintenant à notre prochain exercice,
où nous allons en apprendre plus sur les polices Icône.
Nous allons télécharger Font Awesome,
puis l'inclure dans la conception de notre site Web.
Et aussi, nous allons télécharger bootstrap social et la
conception de certains brevets sociaux à inclure dans le terrain.
Pour commencer, allez dans le dossier de confusion dans votre fenêtre de terminal,
et nous allons utiliser npm pour aller chercher Font Awesome pour nous.
Donc, à l'invite, tapez npm install font-awesome moins save.
Donc, cela va chercher Font Awesome dans notre dossier personne.
Et en même temps, il ajoutera Font Awesome à notre fichier package.json en tant que dépendance.
Une fois que Font Awesome est récupéré,
alors nous pouvons aller de l'avant pour en faire usage sur notre site Web.
L' étape suivante consiste à récupérer le social bootstrap et à l'installer dans notre projet.
Donc pour ce faire, à l'invite, tapez npm
installer bootstrap-social @5 .1.1
moins save.
Et cela va chercher bootstrap social et l'installer dans notre projet.
Maintenant, nous devons utiliser cette police cinq,
c'est la Font Awesome, et le social bootstrap sur notre site Web.
Donc, en allant à index.html en haut,
juste avant le fichier style.css,
je vais importer à la fois Font Awesome et Bootstrap social.
Donc, juste là, tapez le lien
rel stylesheet href
node_modules/font-awesome/css/font-awesome.main.css Donc,
importons cela dans notre fichier index.html de la même manière,
étant donné l'importation du social bootstrap.
Donc node_modules/bootstrap-social/bootsrap-social.css.
Donc, ces deux que nous allons inclure dans notre index.html.
De même, j'ai besoin d'inclure les deux dans mon aboutus.html Alors laissez-moi copier cela et
passer à aboutus.html, puis collez cela dans la aboutus.html aussi.
Maintenant, en revenant à index.html, nous n'allons pas utiliser les icônes Font Awesome,
ainsi que les icônes sociales bootstrap dans notre page index.html.
Aller à cette barre de navigation dans la page index.html,
juste dans ce lien pour leur page d'accueil,
je vais entrer et ajouter ce code Font Awesome.
Donc, je vais dire la classe de travée fa fa-home.
Donc, la fa dit que j'applique la classe Font Awesome, la
maison fa est l'icône spécifique pour l'icône d'accueil. C'
est donc ce que je voulais utiliser sur ma page d'accueil.
Et puis fermez la balise de travé- puis après l'espace, le bouton d'accueil.
Donc, cela inclura l'icône d'accueil là-dedans.
Je vais copier ceci et puis pour le sujet,
je vais utiliser la même chose mais au lieu de fa-home,
alors remarquez donner un espace entre la balise span de fermeture et
environ et au lieu de fa-home je dirais fa-info.
Maintenant ceux-ci, j'ai compris que ce sont les icônes que je veux utiliser.
Vous pouvez consulter la documentation Font Awesome pour
savoir quelles icônes particulières et comment vous les incluez.
Pour le menu, j'utiliserai une icône de liste là-bas.
J' appelle cette icône comme fa-list.
Maintenant, aussi je vais utiliser des icônes de plus grande taille.
Donc, je vais également inclure fa-lg
dans les classes d'icônes fa-lg.
Maintenant, pour le contact, je vais utiliser fa-home,
puis si c'est fa-address-card fa-lg et enregistrer les changements.
Vous devriez répéter la même chose,
l'ajout des mêmes icônes même dans la page aboutus.html,
puis nous allons jeter un oeil à notre page Web après avoir terminé les modifications.
Après avoir modifié aussi aboutus.html et index.html y compris les icônes,
j'ai enregistré les modifications et puis je suis ici sur ma page web et notez
comment ces icônes ont été incluses dans ma barre de navigation.
Ainsi, vous pouvez voir qu'il y a une icône d'accueil devant la maison,
il y a une icône d'info devant environ,
une icône de liste devant le menu et une icône de carte d'adresse devant le contact.
C' est donc une belle façon d'ajouter des éléments visuels dans votre page Web.
Maintenant, c'est merveilleux.
Maintenant, ce que je veux faire, c'est travailler sur la mise à jour des séquences.
Maintenant, je veux remplacer le fax téléphonique et l'e-mail par des icônes et
aussi transformer tous ces boutons en boutons de médias sociaux ici.
Donc, pour ce faire, nous allons utiliser Font Awesome pour cela,
et ensuite nous allons utiliser Bootstrap social pour cela.
Aller au pied de page de la page index.html,
je vais remplacer le téléphone par l'icône Font Awesome.
Donc, je dirais, « i » comme je l'ai mentionné,
vous pouvez soit utiliser span ou I pour spécifier les icônes Font Awesome.
Font Awesome site utilise I mais je vous montre deux façons possibles de faire ces choses.
Donc, je dis fa fa-tel,
Je suis désolé fa-phone et fermer l' étiquette ici.
Et pour le fax, je vais simplement copier ceci,
puis pour le fax si c'est fa-fax,
et pour le courrier électronique c'est fa-enveloppe et enregistrer les modifications.
Maintenant, appliquez la même chose à la page aboutus.html.
En allant sur ma page web,
vous remarquez immédiatement que le téléphone, le fax
et l'e-mail, sont maintenant remplacés par les icônes correspondantes.
Maintenant, la dernière étape consiste à utiliser bootstrap social pour remplacer
tous ces liens par les boutons des médias sociaux.
Pour cela,
nous allons aller au pied de page et ensuite remplacer chacun d'entre
eux par leurs icônes correspondantes.
Donc, je dirais, je classe
Font Awesome fa-google-plus et
fermer l' étiquette là.
Et puis je vais simplement copier ceci et ensuite appliquer la même chose aux autres.
Donc, je vais dire, Facebook,
LinkedIn, Twitter,
YouTube, et enfin pour le courrier, je vais
utiliser une icône d'enveloppe là-bas.
En outre, pour transformer cela en brevets sociaux bootstrap aux balises A,
nous devrions appliquer les classes en tant qu'icône bouton bouton social,
puis bouton-google faire de même pour les autres.
Pour le second, ce serait Facebook,
puis LinkedIn,
Twitter, Google et puis pour le dernier,
puisque nous n'avons pas de bouton d'icône sociale bootstrap correspondant pour le courrier,
nous n'aurons rien à part les icônes sociales bouton.
Maintenant, avec ça, allons jeter un coup d'oeil à notre pied de page.
Aller à votre pied de page, vous pouvez maintenant voir tous les boutons ont
été transformés en leurs boutons sociaux correspondants là-bas.
Faisons la même modification au pied de page dans aboutus.html.
Donc, je suis juste en train de copier ce code là, puis d'aller à aboutus.html,
puis simplement en remplaçant cela dans le pied de page de aboutus.html.
Avec cela, jetons un dernier coup d'oeil à notre page web.
En allant sur notre page Web,
vous pouvez voir que maintenant
tous les liens de médias sociaux là-bas ont été transformés en boutons de médias sociaux là-bas.
Aller à la page à propos,
vous verrez la même chose dans la page à propos aussi.
Maintenant que vous avez terminé cet exercice,
cela peut être un bon moment pour faire un bon commit avec le message, les polices d'icône.