1
00:00:02,790 --> 00:00:06,440
Vamos agora passar para o nosso próximo exercício,

2
00:00:06,440 --> 00:00:09,225
onde aprenderemos mais sobre fontes Icon.

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

4
00:00:11,435 --> 00:00:16,195
e, em seguida, incluí-lo no design do nosso site.

5
00:00:16,195 --> 00:00:20,800
E também vamos baixar bootstrap social e

6
00:00:20,800 --> 00:00:27,360
projetar algumas patentes sociais para serem incluídas no campo.

7
00:00:27,360 --> 00:00:35,450
Para começar, vá para a pasta de confusão em sua janela de terminal,

8
00:00:35,450 --> 00:00:40,310
e vamos usar o npm para ir buscar Font Awesome para nós.

9
00:00:40,310 --> 00:00:49,475
Então, no prompt, digite npm install font-awesome menos salvar.

10
00:00:49,475 --> 00:00:53,930
Então isso vai buscar Font Awesome em nossa pasta ninguém.

11
00:00:53,930 --> 00:01:00,825
E, ao mesmo tempo, ele adicionará Font Awesome ao nosso arquivo package.json como uma dependência.

12
00:01:00,825 --> 00:01:02,910
Uma vez que Font Awesome é buscado,

13
00:01:02,910 --> 00:01:08,215
então podemos ir em frente para fazer uso dele em nosso site.

14
00:01:08,215 --> 00:01:16,100
O próximo passo é buscar o bootstrap social e instalá-lo em nosso projeto.

15
00:01:16,100 --> 00:01:18,980
Então, para fazer isso, no prompt digite npm

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

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

18
00:01:31,645 --> 00:01:37,630
E isso vai buscar bootstrap social e instalá-lo em nosso projeto.

19
00:01:37,630 --> 00:01:41,460
Agora, precisamos usar essa fonte cinco,

20
00:01:41,460 --> 00:01:45,760
é o Font Awesome, e o bootstrap social em nosso site.

21
00:01:45,760 --> 00:01:51,485
Então, indo para index.html logo na parte superior,

22
00:01:51,485 --> 00:01:54,605
pouco antes do arquivo style.css,

23
00:01:54,605 --> 00:02:00,125
eu vou importar tanto Font Awesome e bootstrap social.

24
00:02:00,125 --> 00:02:04,325
Então, aí mesmo, vamos digitar link

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 Então vamos

27
00:02:35,820 --> 00:02:45,080
importar isso para o nosso arquivo index.html de forma semelhante,

28
00:02:46,050 --> 00:02:57,380
dado importar o bootstrap social.

29
00:03:00,460 --> 00:03:07,760
Então node_modules/bootstrap-social/bootsrap-social.css.

30
00:03:07,760 --> 00:03:13,995
Então, esses dois vamos incluir em nosso index.html.

31
00:03:13,995 --> 00:03:21,960
Da mesma forma, eu preciso incluir ambos no meu aboutus.html Então deixe-me copiar isso e

32
00:03:21,960 --> 00:03:29,995
passar para aboutus.html e, em seguida, colar isso no aboutus.html também.

33
00:03:29,995 --> 00:03:37,180
Agora, voltando para index.html não vamos fazer uso dos ícones Font Awesome,

34
00:03:37,180 --> 00:03:43,060
e também os ícones sociais bootstrap em nossa página index.html.

35
00:03:43,060 --> 00:03:48,485
Indo para a barra de navegação na página index.html,

36
00:03:48,485 --> 00:03:53,770
bem neste link para sua página inicial,

37
00:03:53,770 --> 00:03:59,840
eu vou entrar e adicionar esse código Font Awesome.

38
00:03:59,840 --> 00:04:06,430
Então eu vou dizer span classe fa fa-home.

39
00:04:06,430 --> 00:04:10,615
Então, o fa diz que eu estou aplicando a classe Fonte impressionante,

40
00:04:10,615 --> 00:04:14,550
fa casa é o ícone específico para o ícone casa.

41
00:04:14,550 --> 00:04:18,215
Assim, isso é o que eu queria usar na minha página inicial.

42
00:04:18,215 --> 00:04:26,190
E, em seguida, feche a etiqueta de extensão e, em seguida, após o espaço, o botão de início.

43
00:04:26,190 --> 00:04:30,265
Então, isso incluirá o ícone da página inicial lá.

44
00:04:30,265 --> 00:04:36,945
Eu vou copiar isso e, em seguida, para o sobre,

45
00:04:36,945 --> 00:04:42,895
Eu vou usar a mesma coisa, mas em vez de fa-home,

46
00:04:42,895 --> 00:04:46,610
então note dar um espaço entre a tag span de fechamento e

47
00:04:46,610 --> 00:04:51,100
sobre e em vez de fa-home eu diria fa-info.

48
00:04:51,100 --> 00:04:55,280
Agora estes, eu descobri que estes são os ícones que eu quero usar.

49
00:04:55,280 --> 00:05:00,110
Você pode conferir a documentação Font Awesome para

50
00:05:00,110 --> 00:05:04,820
descobrir quais ícones específicos e como você os inclui.

51
00:05:04,820 --> 00:05:09,610
Para o menu vou usar um ícone de lista lá.

52
00:05:09,610 --> 00:05:15,840
Chamo esse ícone como “fa-list”.

53
00:05:15,840 --> 00:05:20,400
Agora, também vou usar ícones de tamanho maior.

54
00:05:20,400 --> 00:05:23,160
Então eu também vou incluir fa-lg

55
00:05:23,160 --> 00:05:32,890
nas classes ícone fa-lg.

56
00:05:32,890 --> 00:05:39,345
Agora para contato eu vou usar fa-home,

57
00:05:39,345 --> 00:05:49,095
e então se este é fa-address-card fa-lg e salvar as alterações.

58
00:05:49,095 --> 00:05:51,465
Você deve repetir o mesmo,

59
00:05:51,465 --> 00:05:56,220
adição dos mesmos ícones, mesmo na página aboutus.html,

60
00:05:56,220 --> 00:06:01,880
e, em seguida, vamos dar uma olhada em nossa página da web depois de concluir as alterações.

61
00:06:01,880 --> 00:06:09,350
Depois de modificar também aboutus.html e index.html incluindo os ícones,

62
00:06:09,350 --> 00:06:14,675
Eu salvei as alterações e, em seguida, aqui estou eu na minha página web e observe

63
00:06:14,675 --> 00:06:21,150
como esses ícones foram incluídos na minha barra de navegação.

64
00:06:21,150 --> 00:06:24,890
Então você pode ver que há um ícone de casa na frente de casa,

65
00:06:24,890 --> 00:06:27,885
há um ícone de informações na frente de cerca de,

66
00:06:27,885 --> 00:06:32,525
um ícone de lista na frente do menu e um ícone de cartão de endereço na frente do contato.

67
00:06:32,525 --> 00:06:39,195
Então, esta é uma boa maneira de adicionar alguns elementos visuais em sua página web.

68
00:06:39,195 --> 00:06:40,800
Agora, isso é maravilhoso.

69
00:06:40,800 --> 00:06:47,590
Agora, o que eu quero fazer é trabalhar na atualização das filmagens.

70
00:06:47,590 --> 00:06:53,250
Agora, eu quero substituir o fax do telefone e e-mail por ícones e

71
00:06:53,250 --> 00:06:59,370
também transformar tudo isso em botões de mídia social aqui.

72
00:06:59,370 --> 00:07:03,810
Então, para fazer isso, vamos fazer uso de Font Awesome para isso,

73
00:07:03,810 --> 00:07:08,440
e então vamos fazer uso de bootstrap social para isso.

74
00:07:08,440 --> 00:07:11,720
Indo para o rodapé da página index.html,

75
00:07:11,720 --> 00:07:19,610
vou substituir o telefone pelo ícone Font Awesome.

76
00:07:19,610 --> 00:07:22,930
Então eu diria, “i” como eu mencionei,

77
00:07:22,930 --> 00:07:29,130
você pode usar span ou I para especificar os ícones Font Awesome.

78
00:07:29,130 --> 00:07:34,820
Fonte impressionante site usa I, mas eu estou mostrando duas maneiras possíveis de fazer essas coisas.

79
00:07:34,820 --> 00:07:41,230
Então eu digo fa fa-tel,

80
00:07:41,230 --> 00:07:52,260
Sinto muito fa-telefone e fechar a <i> etiqueta aqui.

81
00:07:53,270 --> 00:07:58,985
E para fax, vou simplesmente copiar isso,

82
00:07:58,985 --> 00:08:07,550
e então para fax se for fa-fax,

83
00:08:07,550 --> 00:08:17,705
e para e-mail é fa-envelope e salvar alterações.

84
00:08:17,705 --> 00:08:24,485
Agora aplique o mesmo à página aboutus.html.

85
00:08:24,485 --> 00:08:26,210
Indo para a minha página web,

86
00:08:26,210 --> 00:08:29,765
você percebe imediatamente que o telefone, fax

87
00:08:29,765 --> 00:08:34,420
e e-mail, agora são substituídos pelos ícones correspondentes.

88
00:08:34,420 --> 00:08:37,735
Agora, o último passo é usar bootstrap social para substituir

89
00:08:37,735 --> 00:08:41,550
todos esses links com os botões de mídia social.

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

91
00:08:43,350 --> 00:08:47,835
vamos para o rodapé e, em seguida, substituir cada um

92
00:08:47,835 --> 00:08:53,400
deles com seus ícones correspondentes lá.

93
00:08:53,400 --> 00:08:57,345
Então eu diria, i classe

94
00:08:57,345 --> 00:09:06,545
Fonte impressionante fa-google-plus e

95
00:09:06,545 --> 00:09:09,255
fechar a <i> tag lá.

96
00:09:09,255 --> 00:09:16,170
E então eu simplesmente vou copiar isso e, em seguida, aplicar o mesmo para os restantes.

97
00:09:16,170 --> 00:09:21,660
Então eu vou dizer, Facebook,

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

99
00:09:44,910 --> 00:09:51,860
YouTube, e finalmente para e-mail eu vou

100
00:09:51,860 --> 00:09:59,865
usar um ícone de envelope lá.

101
00:09:59,865 --> 00:10:07,250
Além disso, para transformar isso em patentes sociais bootstrap para as tags A,

102
00:10:07,250 --> 00:10:16,150
devemos aplicar as classes como botão botão botão botão social

103
00:10:16,150 --> 00:10:24,870
e, em seguida, botão-google fazendo o mesmo para os restantes.

104
00:10:24,870 --> 00:10:30,255
Para o segundo seria Facebook,

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

106
00:10:44,970 --> 00:10:52,370
Twitter, Google e depois para o último,

107
00:10:52,370 --> 00:11:02,985
já que não temos um botão de ícone social de bootstrap correspondente para o e-mail,

108
00:11:02,985 --> 00:11:08,130
não teremos nada além de ícones sociais de botão.

109
00:11:08,130 --> 00:11:13,170
Agora com isso, vamos dar uma olhada rápida no nosso rodapé.

110
00:11:13,170 --> 00:11:16,720
Indo para o seu rodapé, agora você pode ver todos os botões

111
00:11:16,720 --> 00:11:20,505
foram transformados em seus botões sociais correspondentes lá.

112
00:11:20,505 --> 00:11:25,720
Vamos fazer a mesma mudança para o rodapé em aboutus.html.

113
00:11:25,720 --> 00:11:33,125
Então eu estou apenas copiando esse código lá e, em seguida, indo para aboutus.html,

114
00:11:33,125 --> 00:11:41,675
e, em seguida, simplesmente substituindo isso no rodapé do aboutus.html.

115
00:11:41,675 --> 00:11:46,415
Com isso, vamos dar uma última olhada na nossa página web.

116
00:11:46,415 --> 00:11:48,050
Indo para nossa página web,

117
00:11:48,050 --> 00:11:49,635
você pode ver que agora

118
00:11:49,635 --> 00:11:56,030
todos os links de mídia social lá foram transformados em botões de mídia social lá.

119
00:11:56,030 --> 00:11:58,945
Indo para a página sobre,

120
00:11:58,945 --> 00:12:03,660
você verá a mesma coisa na página sobre também.

121
00:12:03,660 --> 00:12:07,340
Agora que você concluiu este exercício,

122
00:12:07,340 --> 00:12:16,560
este pode ser um bom momento para fazer um bom commit com a mensagem, fontes de ícone.