1
00:00:02,790 --> 00:00:06,440
Pasemos ahora a nuestro próximo ejercicio,

2
00:00:06,440 --> 00:00:09,225
donde aprenderemos más acerca de las fuentes Icon.

3
00:00:09,225 --> 00:00:11,435
Descargaremos Font Awesome,

4
00:00:11,435 --> 00:00:16,195
y luego lo incluiremos en el diseño de nuestro sitio web.

5
00:00:16,195 --> 00:00:20,800
Y también vamos a descargar bootstrap social y

6
00:00:20,800 --> 00:00:27,360
diseñar algunas patentes sociales para ser incluidas en el terreno de juego.

7
00:00:27,360 --> 00:00:35,450
Para empezar, vaya a la carpeta de confusión en su ventana de terminal,

8
00:00:35,450 --> 00:00:40,310
y usaremos npm para ir a buscar Font Awesome para nosotros.

9
00:00:40,310 --> 00:00:49,475
Entonces, en el símbolo del sistema, escriba npm install font-awesome menos guardar.

10
00:00:49,475 --> 00:00:53,930
Así que esto traerá Font Awesome en nuestra carpeta nadie.

11
00:00:53,930 --> 00:01:00,825
Y al mismo tiempo, agregará Font Awesome a nuestro archivo package.json como una dependencia.

12
00:01:00,825 --> 00:01:02,910
Una vez que se obtiene Font Awesome,

13
00:01:02,910 --> 00:01:08,215
entonces podemos seguir adelante para hacer uso de ella en nuestro sitio web.

14
00:01:08,215 --> 00:01:16,100
El siguiente paso es buscar la red social de arranque e instalarla en nuestro proyecto.

15
00:01:16,100 --> 00:01:18,980
Entonces, para hacer eso, en el símbolo del sistema, escriba npm

16
00:01:18,980 --> 00:01:27,090
install bootstrap-social @5 .1.1

17
00:01:29,130 --> 00:01:31,645
menos guardar.

18
00:01:31,645 --> 00:01:37,630
Y esto recuperará las redes sociales de arranque e instalará en nuestro proyecto.

19
00:01:37,630 --> 00:01:41,460
Ahora, necesitamos usar esta fuente cinco,

20
00:01:41,460 --> 00:01:45,760
es la Font Awesome, y la social de arranque en nuestro sitio web.

21
00:01:45,760 --> 00:01:51,485
Así que yendo a index.html justo en la parte superior,

22
00:01:51,485 --> 00:01:54,605
justo antes del archivo style.css,

23
00:01:54,605 --> 00:02:00,125
voy a importar tanto Font Awesome como social de arranque.

24
00:02:00,125 --> 00:02:04,325
Así que ahí mismo, vamos a escribir en el enlace

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 Así que vamos a

27
00:02:35,820 --> 00:02:45,080
importar eso en nuestro archivo index.html de manera similar,

28
00:02:46,050 --> 00:02:57,380
dado importar el social de arranque.

29
00:03:00,460 --> 00:03:07,760
Así que node_modules/bootstrap-social/bootsrap-social.css.

30
00:03:07,760 --> 00:03:13,995
Así que estos dos vamos a incluir en nuestro index.html.

31
00:03:13,995 --> 00:03:21,960
Del mismo modo, necesito incluir ambos en mi aboutus.html Así que permítanme copiar eso y

32
00:03:21,960 --> 00:03:29,995
pasar a aboutus.html y luego pegarlo en aboutus.html también.

33
00:03:29,995 --> 00:03:37,180
Ahora, volviendo a index.html no vamos a hacer uso de los iconos Font Awesome,

34
00:03:37,180 --> 00:03:43,060
y también los iconos sociales de arranque en nuestra página index.html.

35
00:03:43,060 --> 00:03:48,485
Ir a esa barra de navegación en la página index.html,

36
00:03:48,485 --> 00:03:53,770
justo en este enlace para su página de inicio,

37
00:03:53,770 --> 00:03:59,840
voy a entrar y agregar ese código Font Awesome.

38
00:03:59,840 --> 00:04:06,430
Así que voy a decir span clase fa fa-home.

39
00:04:06,430 --> 00:04:10,615
Así que el fa dice que estoy aplicando la clase Fuente impresionante,

40
00:04:10,615 --> 00:04:14,550
fa casa es el icono específico para el icono de inicio.

41
00:04:14,550 --> 00:04:18,215
Así que eso es lo que quería usar en mi página de inicio.

42
00:04:18,215 --> 00:04:26,190
Y luego cierre la etiqueta de span- y luego después del espacio, el botón de inicio.

43
00:04:26,190 --> 00:04:30,265
Así que eso incluirá el icono de inicio allí.

44
00:04:30,265 --> 00:04:36,945
Voy a copiar esto y luego para el acerca,

45
00:04:36,945 --> 00:04:42,895
Voy a usar la misma cosa, pero en lugar de fa-home,

46
00:04:42,895 --> 00:04:46,610
así que note dar un espacio entre la etiqueta de cierre y

47
00:04:46,610 --> 00:04:51,100
alrededor y en lugar de fa-home diría fa-info.

48
00:04:51,100 --> 00:04:55,280
Ahora estos, he descubierto que estos son los iconos que quiero usar.

49
00:04:55,280 --> 00:05:00,110
Puede consultar la documentación de Font Awesome para

50
00:05:00,110 --> 00:05:04,820
averiguar qué iconos particulares y cómo los incluye.

51
00:05:04,820 --> 00:05:09,610
Para el menú usaré un icono de lista allí.

52
00:05:09,610 --> 00:05:15,840
Llamo a ese icono como lista de fa-list.

53
00:05:15,840 --> 00:05:20,400
Ahora, también voy a usar iconos de mayor tamaño.

54
00:05:20,400 --> 00:05:23,160
Así que también incluiré fa-lg

55
00:05:23,160 --> 00:05:32,890
en las clases de iconos fa-lg.

56
00:05:32,890 --> 00:05:39,345
Ahora para el contacto voy a usar fa-home,

57
00:05:39,345 --> 00:05:49,095
y luego si esto es fa-address-card fa-lg y guardar los cambios.

58
00:05:49,095 --> 00:05:51,465
Debe repetir lo mismo, la

59
00:05:51,465 --> 00:05:56,220
adición de los mismos iconos incluso en la página aboutus.html,

60
00:05:56,220 --> 00:06:01,880
y luego echaremos un vistazo a nuestra página web después de completar los cambios.

61
00:06:01,880 --> 00:06:09,350
Después de modificar también aboutus.html y index.html incluyendo los iconos,

62
00:06:09,350 --> 00:06:14,675
he guardado los cambios y luego aquí estoy en mi página web y anoto

63
00:06:14,675 --> 00:06:21,150
cómo estos iconos se incluyeron en mi barra de navegación.

64
00:06:21,150 --> 00:06:24,890
Así que puede ver que hay un icono de inicio delante de casa,

65
00:06:24,890 --> 00:06:27,885
hay un icono de información delante de acerca,

66
00:06:27,885 --> 00:06:32,525
un icono de lista delante del menú y un icono de tarjeta de dirección delante del contacto.

67
00:06:32,525 --> 00:06:39,195
Así que esta es una buena manera de agregar algunos elementos visuales en su página web.

68
00:06:39,195 --> 00:06:40,800
Ahora, esto es maravilloso.

69
00:06:40,800 --> 00:06:47,590
Ahora lo que quiero hacer es trabajar en la actualización de las imágenes.

70
00:06:47,590 --> 00:06:53,250
Ahora, quiero reemplazar el fax telefónico y el correo electrónico con iconos y

71
00:06:53,250 --> 00:06:59,370
también convertir todos estos en botones de redes sociales aquí.

72
00:06:59,370 --> 00:07:03,810
Así que para hacer eso, vamos a hacer uso de Font Awesome para esto,

73
00:07:03,810 --> 00:07:08,440
y luego vamos a hacer uso de bootstrap social para esto.

74
00:07:08,440 --> 00:07:11,720
Ir al pie de página de la página index.html,

75
00:07:11,720 --> 00:07:19,610
voy a reemplazar el teléfono con el icono de Font Awesome.

76
00:07:19,610 --> 00:07:22,930
Así que diría, «i» como mencioné,

77
00:07:22,930 --> 00:07:29,130
puede usar span o I para especificar los iconos de Font Awesome.

78
00:07:29,130 --> 00:07:34,820
Font Awesome sitio web utiliza yo, pero te estoy mostrando dos formas posibles de hacer estas cosas.

79
00:07:34,820 --> 00:07:41,230
Así que digo fa fa-tel,

80
00:07:41,230 --> 00:07:52,260
Lo siento fa-teléfono y cerrar la <i> etiqueta aquí.

81
00:07:53,270 --> 00:07:58,985
Y para el fax, simplemente voy a copiar esto,

82
00:07:58,985 --> 00:08:07,550
y luego para el fax si es fa-fax,

83
00:08:07,550 --> 00:08:17,705
y para el correo electrónico es fa-sobre y guardar los cambios.

84
00:08:17,705 --> 00:08:24,485
Ahora aplique lo mismo a la página aboutus.html. Al

85
00:08:24,485 --> 00:08:26,210
ir a mi página web,

86
00:08:26,210 --> 00:08:29,765
inmediatamente se da cuenta de que el teléfono, el fax

87
00:08:29,765 --> 00:08:34,420
y el correo electrónico, ahora se reemplazan con los iconos correspondientes.

88
00:08:34,420 --> 00:08:37,735
Ahora el último paso es usar bootstrap social para reemplazar

89
00:08:37,735 --> 00:08:41,550
todos estos enlaces con los botones de las redes sociales.

90
00:08:41,550 --> 00:08:43,350
Para hacerlo,

91
00:08:43,350 --> 00:08:47,835
iremos al pie de página y luego reemplazaremos cada uno de

92
00:08:47,835 --> 00:08:53,400
ellos con sus iconos correspondientes allí.

93
00:08:53,400 --> 00:08:57,345
Así que diría, i clase

94
00:08:57,345 --> 00:09:06,545
Font Awesome fa-google-plus y

95
00:09:06,545 --> 00:09:09,255
cierre la <i> etiqueta allí.

96
00:09:09,255 --> 00:09:16,170
Y luego simplemente voy a copiar esto y luego aplicar lo mismo a los restantes.

97
00:09:16,170 --> 00:09:21,660
Así que voy a decir, Facebook,

98
00:09:28,330 --> 00:09:38,400
LinkedIn, Twitter

99
00:09:44,910 --> 00:09:51,860
, YouTube, y finalmente para el correo voy a

100
00:09:51,860 --> 00:09:59,865
usar un icono de sobre allí.

101
00:09:59,865 --> 00:10:07,250
Además, para convertir esto en patentes sociales de arranque a las etiquetas A,

102
00:10:07,250 --> 00:10:16,150
debemos aplicar las clases como botón botón botón icono social,

103
00:10:16,150 --> 00:10:24,870
y luego botón-google haciendo lo mismo con los restantes.

104
00:10:24,870 --> 00:10:30,255
Para el segundo sería Facebook,

105
00:10:30,255 --> 00:10:38,690
luego LinkedIn,

106
00:10:44,970 --> 00:10:52,370
Twitter, Google y luego para el último,

107
00:10:52,370 --> 00:11:02,985
ya que no tenemos un botón de icono social de arranque correspondiente para el correo,

108
00:11:02,985 --> 00:11:08,130
no tendremos nada excepto iconos sociales de botones.

109
00:11:08,130 --> 00:11:13,170
Ahora con esto, vamos a echar un vistazo rápido a nuestro pie de página.

110
00:11:13,170 --> 00:11:16,720
Ir a su pie de página, ahora puede ver todos los botones

111
00:11:16,720 --> 00:11:20,505
se han convertido en sus botones sociales correspondientes allí.

112
00:11:20,505 --> 00:11:25,720
Vamos a hacer el mismo cambio en el pie de página en aboutus.html.

113
00:11:25,720 --> 00:11:33,125
Así que solo estoy copiando ese código allí y luego voy a aboutus.html,

114
00:11:33,125 --> 00:11:41,675
y luego simplemente reemplazándolo en el pie de página de aboutus.html.

115
00:11:41,675 --> 00:11:46,415
Con eso echemos un vistazo final a nuestra página web. Al

116
00:11:46,415 --> 00:11:48,050
ir a nuestra página web,

117
00:11:48,050 --> 00:11:49,635
se puede ver que ahora

118
00:11:49,635 --> 00:11:56,030
todos los enlaces de redes sociales allí se han convertido en botones de redes sociales allí. Al

119
00:11:56,030 --> 00:11:58,945
ir a la página acerca,

120
00:11:58,945 --> 00:12:03,660
verá lo mismo en la página acerca también.

121
00:12:03,660 --> 00:12:07,340
Ahora que ha completado este ejercicio,

122
00:12:07,340 --> 00:12:16,560
este puede ser un buen momento para hacer una buena confirmación con las fuentes de icono del mensaje.