1
00:00:00,000 --> 00:00:04,303
[MÚSICA]

2
00:00:04,303 --> 00:00:06,765
Hablemos ahora de las fuentes de los iconos.

3
00:00:06,765 --> 00:00:07,867
¿ Qué son?

4
00:00:07,867 --> 00:00:09,284
¿ Cómo son útiles?

5
00:00:09,284 --> 00:00:13,540
¿ Y cómo hacemos uso de ellos en el diseño de nuestra página web?

6
00:00:13,540 --> 00:00:18,958
Las fuentes de iconos proporcionan una forma muy flexible de incluir

7
00:00:18,958 --> 00:00:24,732
imágenes pequeñas en nuestras páginas web que se pueden aplicar al mismo estilo que el texto.

8
00:00:24,732 --> 00:00:30,753
Así que esa es la razón por la que las fuentes de iconos resultan muy,

9
00:00:30,753 --> 00:00:35,840
muy útiles en el diseño de sitios web.

10
00:00:35,840 --> 00:00:40,290
Usando fuentes de iconos, puede tomar una página web como esta y

11
00:00:40,290 --> 00:00:44,270
convertirla rápidamente en una página web como esta.

12
00:00:44,270 --> 00:00:50,381
Tenga en cuenta el uso de iconos junto con el texto en la barra de navegación,

13
00:00:50,381 --> 00:00:54,996
y luego cuando se desplaza hacia abajo hasta el pie de página,

14
00:00:54,996 --> 00:01:00,013
puede ver más iconos que se utilizan en el pie de página.

15
00:01:00,013 --> 00:01:08,220
Y también sus enlaces a redes sociales ahora son reemplazados por botones de redes sociales aquí.

16
00:01:08,220 --> 00:01:16,910
Así que estos son los cambios que las fuentes de iconos le permitirán hacer a su sitio web.

17
00:01:16,910 --> 00:01:22,367
Así que como mencioné brevemente antes, las fuentes de iconos son un conjunto de símbolos o

18
00:01:22,367 --> 00:01:26,219
glifos que se pueden utilizar en el diseño de su sitio web.

19
00:01:26,219 --> 00:01:29,519
Estas se pueden utilizar al igual que las fuentes normales, al

20
00:01:29,519 --> 00:01:34,390
igual que las fuentes de texto normales que usas en tu sitio web.

21
00:01:34,390 --> 00:01:38,953
Su ventaja es que puede darles estilo y

22
00:01:38,953 --> 00:01:43,876
luego expandirlos y contraerlos y usar todos los

23
00:01:43,876 --> 00:01:49,657
estilos típicos que utiliza en su texto, para sus iconos también.

24
00:01:49,657 --> 00:01:53,535
Se ven como un popular reemplazo ligero para

25
00:01:53,535 --> 00:01:57,159
gráficos simples que puedes usar en tus páginas web,

26
00:01:57,159 --> 00:02:01,750
simplemente gráficos o imágenes que puedes usar en tus páginas web.

27
00:02:01,750 --> 00:02:07,290
Y son muy, muy útiles en el diseño de sus páginas web.

28
00:02:07,290 --> 00:02:15,110
Hay muchos paquetes de fuentes de iconos disponibles en el mercado.

29
00:02:15,110 --> 00:02:18,180
Uno de los más populares es Font Awesome, del

30
00:02:18,180 --> 00:02:19,377
que voy a hablar a continuación.

31
00:02:20,590 --> 00:02:24,850
Font Awesome, como digo, es una fuente de icono muy popular.

32
00:02:24,850 --> 00:02:28,770
Está disponible de forma gratuita para su uso en el diseño de su página.

33
00:02:28,770 --> 00:02:32,975
Ha sido ampliamente utilizado por muchos sitios web diferentes.

34
00:02:32,975 --> 00:02:37,580
Aprenderemos cómo descargar Font Awesome y

35
00:02:37,580 --> 00:02:42,940
luego usarla en la página web en el ejercicio que sigue a esta conferencia.

36
00:02:44,180 --> 00:02:49,982
Usar Font Awesome en su página web es tan simple como

37
00:02:49,982 --> 00:02:55,217
usar algunas clases que se aplican a una i,

38
00:02:55,217 --> 00:02:59,897
o una etiqueta span en el código HTML de su página web.

39
00:02:59,897 --> 00:03:02,480
Así que una vez que incluya el CSS y

40
00:03:02,480 --> 00:03:07,440
los archivos de fuentes que están disponibles a través de Font Awesome,

41
00:03:07,440 --> 00:03:13,860
entonces es muy sencillo hacer uso de Font Awesome en sus páginas.

42
00:03:15,120 --> 00:03:20,491
Otra característica común que se puede ver en

43
00:03:20,491 --> 00:03:27,337
las páginas web es el uso de botones del sitio social allí como Facebook,

44
00:03:27,337 --> 00:03:33,260
Twitter, Google+ y YouTube y muchos otros.

45
00:03:34,530 --> 00:03:39,931
Ahora, afortunadamente para nosotros, hay este otro

46
00:03:39,931 --> 00:03:46,415
archivo CSS llamado bootstrap-social que puede descargar y

47
00:03:46,415 --> 00:03:50,873
hacer uso de, incluyendo varios

48
00:03:50,873 --> 00:03:55,346
botones del sitio de redes sociales en su página web.

49
00:03:55,346 --> 00:04:01,940
Veremos el uso de bootstrap-social en el ejercicio que sigue.

50
00:04:01,940 --> 00:04:06,532
Una vez que descargue el archivo css bootstrap-social, lo incluirá en su página web.

51
00:04:06,532 --> 00:04:11,385
Y luego, junto con los iconos Font Awesome,

52
00:04:11,385 --> 00:04:16,604
puede combinar eso con clases sociales de arranque

53
00:04:16,604 --> 00:04:22,688
para incluir varios botones de redes sociales en sus páginas web.

54
00:04:22,688 --> 00:04:27,834
Así que sin más preámbulos, pasemos al siguiente ejercicio donde

55
00:04:27,834 --> 00:04:32,787
vamos a usar tanto Font Awesome como bootstrap-social,

56
00:04:32,787 --> 00:04:37,546
una versión modificada del archivo bootstrap-social.css que

57
00:04:37,546 --> 00:04:42,984
proporciono en las instrucciones de ejercicio que debe descargar e

58
00:04:42,984 --> 00:04:48,647
incluir en su proyecto de confusión y hacer uso de de la misma en el ejercicio.

59
00:04:48,647 --> 00:04:54,639
[ MÚSICA]