Pasemos ahora a nuestro próximo ejercicio,
donde aprenderemos más acerca de las fuentes Icon.
Descargaremos Font Awesome,
y luego lo incluiremos en el diseño de nuestro sitio web.
Y también vamos a descargar bootstrap social y
diseñar algunas patentes sociales para ser incluidas en el terreno de juego.
Para empezar, vaya a la carpeta de confusión en su ventana de terminal,
y usaremos npm para ir a buscar Font Awesome para nosotros.
Entonces, en el símbolo del sistema, escriba npm install font-awesome menos guardar.
Así que esto traerá Font Awesome en nuestra carpeta nadie.
Y al mismo tiempo, agregará Font Awesome a nuestro archivo package.json como una dependencia.
Una vez que se obtiene Font Awesome,
entonces podemos seguir adelante para hacer uso de ella en nuestro sitio web.
El siguiente paso es buscar la red social de arranque e instalarla en nuestro proyecto.
Entonces, para hacer eso, en el símbolo del sistema, escriba npm
install bootstrap-social @5 .1.1
menos guardar.
Y esto recuperará las redes sociales de arranque e instalará en nuestro proyecto.
Ahora, necesitamos usar esta fuente cinco,
es la Font Awesome, y la social de arranque en nuestro sitio web.
Así que yendo a index.html justo en la parte superior,
justo antes del archivo style.css,
voy a importar tanto Font Awesome como social de arranque.
Así que ahí mismo, vamos a escribir en el enlace
rel stylesheet href
node_modules/font-awesome/css/font-awesome.main.css Así que vamos a
importar eso en nuestro archivo index.html de manera similar,
dado importar el social de arranque.
Así que node_modules/bootstrap-social/bootsrap-social.css.
Así que estos dos vamos a incluir en nuestro index.html.
Del mismo modo, necesito incluir ambos en mi aboutus.html Así que permítanme copiar eso y
pasar a aboutus.html y luego pegarlo en aboutus.html también.
Ahora, volviendo a index.html no vamos a hacer uso de los iconos Font Awesome,
y también los iconos sociales de arranque en nuestra página index.html.
Ir a esa barra de navegación en la página index.html,
justo en este enlace para su página de inicio,
voy a entrar y agregar ese código Font Awesome.
Así que voy a decir span clase fa fa-home.
Así que el fa dice que estoy aplicando la clase Fuente impresionante,
fa casa es el icono específico para el icono de inicio.
Así que eso es lo que quería usar en mi página de inicio.
Y luego cierre la etiqueta de span- y luego después del espacio, el botón de inicio.
Así que eso incluirá el icono de inicio allí.
Voy a copiar esto y luego para el acerca,
Voy a usar la misma cosa, pero en lugar de fa-home,
así que note dar un espacio entre la etiqueta de cierre y
alrededor y en lugar de fa-home diría fa-info.
Ahora estos, he descubierto que estos son los iconos que quiero usar.
Puede consultar la documentación de Font Awesome para
averiguar qué iconos particulares y cómo los incluye.
Para el menú usaré un icono de lista allí.
Llamo a ese icono como lista de fa-list.
Ahora, también voy a usar iconos de mayor tamaño.
Así que también incluiré fa-lg
en las clases de iconos fa-lg.
Ahora para el contacto voy a usar fa-home,
y luego si esto es fa-address-card fa-lg y guardar los cambios.
Debe repetir lo mismo, la
adición de los mismos iconos incluso en la página aboutus.html,
y luego echaremos un vistazo a nuestra página web después de completar los cambios.
Después de modificar también aboutus.html y index.html incluyendo los iconos,
he guardado los cambios y luego aquí estoy en mi página web y anoto
cómo estos iconos se incluyeron en mi barra de navegación.
Así que puede ver que hay un icono de inicio delante de casa,
hay un icono de información delante de acerca,
un icono de lista delante del menú y un icono de tarjeta de dirección delante del contacto.
Así que esta es una buena manera de agregar algunos elementos visuales en su página web.
Ahora, esto es maravilloso.
Ahora lo que quiero hacer es trabajar en la actualización de las imágenes.
Ahora, quiero reemplazar el fax telefónico y el correo electrónico con iconos y
también convertir todos estos en botones de redes sociales aquí.
Así que para hacer eso, vamos a hacer uso de Font Awesome para esto,
y luego vamos a hacer uso de bootstrap social para esto.
Ir al pie de página de la página index.html,
voy a reemplazar el teléfono con el icono de Font Awesome.
Así que diría, «i» como mencioné,
puede usar span o I para especificar los iconos de Font Awesome.
Font Awesome sitio web utiliza yo, pero te estoy mostrando dos formas posibles de hacer estas cosas.
Así que digo fa fa-tel,
Lo siento fa-teléfono y cerrar la etiqueta aquí.
Y para el fax, simplemente voy a copiar esto,
y luego para el fax si es fa-fax,
y para el correo electrónico es fa-sobre y guardar los cambios.
Ahora aplique lo mismo a la página aboutus.html. Al
ir a mi página web,
inmediatamente se da cuenta de que el teléfono, el fax
y el correo electrónico, ahora se reemplazan con los iconos correspondientes.
Ahora el último paso es usar bootstrap social para reemplazar
todos estos enlaces con los botones de las redes sociales.
Para hacerlo,
iremos al pie de página y luego reemplazaremos cada uno de
ellos con sus iconos correspondientes allí.
Así que diría, i clase
Font Awesome fa-google-plus y
cierre la etiqueta allí.
Y luego simplemente voy a copiar esto y luego aplicar lo mismo a los restantes.
Así que voy a decir, Facebook,
LinkedIn, Twitter
, YouTube, y finalmente para el correo voy a
usar un icono de sobre allí.
Además, para convertir esto en patentes sociales de arranque a las etiquetas A,
debemos aplicar las clases como botón botón botón icono social,
y luego botón-google haciendo lo mismo con los restantes.
Para el segundo sería Facebook,
luego LinkedIn,
Twitter, Google y luego para el último,
ya que no tenemos un botón de icono social de arranque correspondiente para el correo,
no tendremos nada excepto iconos sociales de botones.
Ahora con esto, vamos a echar un vistazo rápido a nuestro pie de página.
Ir a su pie de página, ahora puede ver todos los botones
se han convertido en sus botones sociales correspondientes allí.
Vamos a hacer el mismo cambio en el pie de página en aboutus.html.
Así que solo estoy copiando ese código allí y luego voy a aboutus.html,
y luego simplemente reemplazándolo en el pie de página de aboutus.html.
Con eso echemos un vistazo final a nuestra página web. Al
ir a nuestra página web,
se puede ver que ahora
todos los enlaces de redes sociales allí se han convertido en botones de redes sociales allí. Al
ir a la página acerca,
verá lo mismo en la página acerca también.
Ahora que ha completado este ejercicio,
este puede ser un buen momento para hacer una buena confirmación con las fuentes de icono del mensaje.