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

2
00:00:04,303 --> 00:00:06,765
Vamos agora falar sobre fontes de ícones.

3
00:00:06,765 --> 00:00:07,867
O que são eles?

4
00:00:07,867 --> 00:00:09,284
Como eles são úteis?

5
00:00:09,284 --> 00:00:13,540
E como fazemos uso deles na concepção do nosso site?

6
00:00:13,540 --> 00:00:18,958
Fontes de ícone fornecem uma maneira muito flexível de incluir pequenas

7
00:00:18,958 --> 00:00:24,732
imagens em nossas páginas da web que podem ser estilizadas como texto.

8
00:00:24,732 --> 00:00:30,753
Então essa é a razão pela qual as fontes de ícone são muito,

9
00:00:30,753 --> 00:00:35,840
muito úteis na criação de sites.

10
00:00:35,840 --> 00:00:40,290
Usando fontes de ícone, você pode pegar uma página da web como esta e

11
00:00:40,290 --> 00:00:44,270
rapidamente transformá-la em uma página da web como esta.

12
00:00:44,270 --> 00:00:50,381
Observe o uso de ícones junto com o texto na barra de navegação

13
00:00:50,381 --> 00:00:54,996
e, em seguida, quando você rolar para baixo até o rodapé,

14
00:00:54,996 --> 00:01:00,013
você pode ver mais ícones sendo usados no rodapé.

15
00:01:00,013 --> 00:01:08,220
E também seus links de mídia social agora são substituídos por botões de mídia social aqui.

16
00:01:08,220 --> 00:01:16,910
Portanto, estas são as mudanças que as fontes de ícones permitirão que você faça em seu site.

17
00:01:16,910 --> 00:01:22,367
Então, como eu mencionei brevemente anteriormente, fontes de ícones são um conjunto de símbolos ou

18
00:01:22,367 --> 00:01:26,219
glifos que podem ser usados no design do seu site.

19
00:01:26,219 --> 00:01:29,519
Elas podem ser usadas como fontes normais,

20
00:01:29,519 --> 00:01:34,390
assim como fontes de texto normais que você usa em seu site.

21
00:01:34,390 --> 00:01:38,953
Sua vantagem é que você pode estilizá-los e

22
00:01:38,953 --> 00:01:43,876
, em seguida, expandir e contratá-los e usar todos os

23
00:01:43,876 --> 00:01:49,657
estilos típicos que você usa em seu texto, para seus ícones também.

24
00:01:49,657 --> 00:01:53,535
Eles são vistos como um substituto leve popular para

25
00:01:53,535 --> 00:01:57,159
gráficos simples que você pode usar em suas páginas da web,

26
00:01:57,159 --> 00:02:01,750
simplesmente gráficos ou imagens que você pode usar em suas páginas da web.

27
00:02:01,750 --> 00:02:07,290
E eles são muito, muito úteis na criação de suas páginas web.

28
00:02:07,290 --> 00:02:15,110
Existem muitos pacotes de fontes de ícones que estão disponíveis no mercado.

29
00:02:15,110 --> 00:02:18,180
Um dos mais populares é Font Awesome, sobre o

30
00:02:18,180 --> 00:02:19,377
qual vou falar a seguir.

31
00:02:20,590 --> 00:02:24,850
Font Awesome, como eu digo, é uma fonte ícone muito popular.

32
00:02:24,850 --> 00:02:28,770
Ele está disponível gratuitamente para uso na concepção de seu design de página.

33
00:02:28,770 --> 00:02:32,975
Tem sido amplamente utilizado por muitos sites diferentes.

34
00:02:32,975 --> 00:02:37,580
Vamos aprender como baixar Font Awesome e

35
00:02:37,580 --> 00:02:42,940
, em seguida, usá-lo na página web no exercício que segue esta palestra.

36
00:02:44,180 --> 00:02:49,982
Usar fonte impressionante em sua página web é tão simples como

37
00:02:49,982 --> 00:02:55,217
usar algumas classes que são aplicadas a um i,

38
00:02:55,217 --> 00:02:59,897
ou uma tag span em seu código HTML página web.

39
00:02:59,897 --> 00:03:02,480
Então, uma vez que você incluir

40
00:03:02,480 --> 00:03:07,440
o CSS e os arquivos de fonte que estão disponíveis através de Font Awesome,

41
00:03:07,440 --> 00:03:13,860
então é muito simples fazer uso de Font Awesome em suas páginas.

42
00:03:15,120 --> 00:03:20,491
Outro recurso comum que você veria em

43
00:03:20,491 --> 00:03:27,337
páginas da web é o uso de botões de sites sociais como Facebook,

44
00:03:27,337 --> 00:03:33,260
Twitter, Google+ e YouTube e muitos outros.

45
00:03:34,530 --> 00:03:39,931
Agora, felizmente para nós, há este outro

46
00:03:39,931 --> 00:03:46,415
arquivo CSS chamado bootstrap-social que você pode baixar e

47
00:03:46,415 --> 00:03:50,873
fazer uso de, incluindo vários

48
00:03:50,873 --> 00:03:55,346
botões de sites de mídia social em sua página web.

49
00:03:55,346 --> 00:04:01,940
Vamos ver o uso de bootstrap-social no exercício que se segue.

50
00:04:01,940 --> 00:04:06,532
Depois de baixar o arquivo css bootstrap-social, você inclui isso em sua página da web.

51
00:04:06,532 --> 00:04:11,385
E, em seguida, junto com os ícones Font Awesome,

52
00:04:11,385 --> 00:04:16,604
você pode combinar isso com classes sociais bootstrap

53
00:04:16,604 --> 00:04:22,688
para incluir vários botões de mídia social em suas páginas da web.

54
00:04:22,688 --> 00:04:27,834
Então, sem mais delongas, vamos passar para o próximo exercício onde

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

56
00:04:32,787 --> 00:04:37,546
uma versão modificada do arquivo bootstrap-social.css que eu

57
00:04:37,546 --> 00:04:42,984
forneço nas instruções de exercício que você deve baixar e

58
00:04:42,984 --> 00:04:48,647
incluir em seu projeto de confusão e fazer uso dele no exercício.

59
00:04:48,647 --> 00:04:54,639
[ MUSIC]