Vamos agora passar para o nosso próximo exercício,
onde aprenderemos mais sobre fontes Icon.
Vamos baixar Font Awesome
e, em seguida, incluí-lo no design do nosso site.
E também vamos baixar bootstrap social e
projetar algumas patentes sociais para serem incluídas no campo.
Para começar, vá para a pasta de confusão em sua janela de terminal,
e vamos usar o npm para ir buscar Font Awesome para nós.
Então, no prompt, digite npm install font-awesome menos salvar.
Então isso vai buscar Font Awesome em nossa pasta ninguém.
E, ao mesmo tempo, ele adicionará Font Awesome ao nosso arquivo package.json como uma dependência.
Uma vez que Font Awesome é buscado,
então podemos ir em frente para fazer uso dele em nosso site.
O próximo passo é buscar o bootstrap social e instalá-lo em nosso projeto.
Então, para fazer isso, no prompt digite npm
instalar bootstrap-social @5 .1.1
menos salvar.
E isso vai buscar bootstrap social e instalá-lo em nosso projeto.
Agora, precisamos usar essa fonte cinco,
é o Font Awesome, e o bootstrap social em nosso site.
Então, indo para index.html logo na parte superior,
pouco antes do arquivo style.css,
eu vou importar tanto Font Awesome e bootstrap social.
Então, aí mesmo, vamos digitar link
rel stylesheet href
node_modules/font-awesome/css/font-awesome.main.css Então vamos
importar isso para o nosso arquivo index.html de forma semelhante,
dado importar o bootstrap social.
Então node_modules/bootstrap-social/bootsrap-social.css.
Então, esses dois vamos incluir em nosso index.html.
Da mesma forma, eu preciso incluir ambos no meu aboutus.html Então deixe-me copiar isso e
passar para aboutus.html e, em seguida, colar isso no aboutus.html também.
Agora, voltando para index.html não vamos fazer uso dos ícones Font Awesome,
e também os ícones sociais bootstrap em nossa página index.html.
Indo para a barra de navegação na página index.html,
bem neste link para sua página inicial,
eu vou entrar e adicionar esse código Font Awesome.
Então eu vou dizer span classe fa fa-home.
Então, o fa diz que eu estou aplicando a classe Fonte impressionante,
fa casa é o ícone específico para o ícone casa.
Assim, isso é o que eu queria usar na minha página inicial.
E, em seguida, feche a etiqueta de extensão e, em seguida, após o espaço, o botão de início.
Então, isso incluirá o ícone da página inicial lá.
Eu vou copiar isso e, em seguida, para o sobre,
Eu vou usar a mesma coisa, mas em vez de fa-home,
então note dar um espaço entre a tag span de fechamento e
sobre e em vez de fa-home eu diria fa-info.
Agora estes, eu descobri que estes são os ícones que eu quero usar.
Você pode conferir a documentação Font Awesome para
descobrir quais ícones específicos e como você os inclui.
Para o menu vou usar um ícone de lista lá.
Chamo esse ícone como “fa-list”.
Agora, também vou usar ícones de tamanho maior.
Então eu também vou incluir fa-lg
nas classes ícone fa-lg.
Agora para contato eu vou usar fa-home,
e então se este é fa-address-card fa-lg e salvar as alterações.
Você deve repetir o mesmo,
adição dos mesmos ícones, mesmo na página aboutus.html,
e, em seguida, vamos dar uma olhada em nossa página da web depois de concluir as alterações.
Depois de modificar também aboutus.html e index.html incluindo os ícones,
Eu salvei as alterações e, em seguida, aqui estou eu na minha página web e observe
como esses ícones foram incluídos na minha barra de navegação.
Então você pode ver que há um ícone de casa na frente de casa,
há um ícone de informações na frente de cerca de,
um ícone de lista na frente do menu e um ícone de cartão de endereço na frente do contato.
Então, esta é uma boa maneira de adicionar alguns elementos visuais em sua página web.
Agora, isso é maravilhoso.
Agora, o que eu quero fazer é trabalhar na atualização das filmagens.
Agora, eu quero substituir o fax do telefone e e-mail por ícones e
também transformar tudo isso em botões de mídia social aqui.
Então, para fazer isso, vamos fazer uso de Font Awesome para isso,
e então vamos fazer uso de bootstrap social para isso.
Indo para o rodapé da página index.html,
vou substituir o telefone pelo ícone Font Awesome.
Então eu diria, “i” como eu mencionei,
você pode usar span ou I para especificar os ícones Font Awesome.
Fonte impressionante site usa I, mas eu estou mostrando duas maneiras possíveis de fazer essas coisas.
Então eu digo fa fa-tel,
Sinto muito fa-telefone e fechar a etiqueta aqui.
E para fax, vou simplesmente copiar isso,
e então para fax se for fa-fax,
e para e-mail é fa-envelope e salvar alterações.
Agora aplique o mesmo à página aboutus.html.
Indo para a minha página web,
você percebe imediatamente que o telefone, fax
e e-mail, agora são substituídos pelos ícones correspondentes.
Agora, o último passo é usar bootstrap social para substituir
todos esses links com os botões de mídia social.
Para fazer isso,
vamos para o rodapé e, em seguida, substituir cada um
deles com seus ícones correspondentes lá.
Então eu diria, i classe
Fonte impressionante fa-google-plus e
fechar a tag lá.
E então eu simplesmente vou copiar isso e, em seguida, aplicar o mesmo para os restantes.
Então eu vou dizer, Facebook,
LinkedIn, Twitter,
YouTube, e finalmente para e-mail eu vou
usar um ícone de envelope lá.
Além disso, para transformar isso em patentes sociais bootstrap para as tags A,
devemos aplicar as classes como botão botão botão botão social
e, em seguida, botão-google fazendo o mesmo para os restantes.
Para o segundo seria Facebook,
depois LinkedIn,
Twitter, Google e depois para o último,
já que não temos um botão de ícone social de bootstrap correspondente para o e-mail,
não teremos nada além de ícones sociais de botão.
Agora com isso, vamos dar uma olhada rápida no nosso rodapé.
Indo para o seu rodapé, agora você pode ver todos os botões
foram transformados em seus botões sociais correspondentes lá.
Vamos fazer a mesma mudança para o rodapé em aboutus.html.
Então eu estou apenas copiando esse código lá e, em seguida, indo para aboutus.html,
e, em seguida, simplesmente substituindo isso no rodapé do aboutus.html.
Com isso, vamos dar uma última olhada na nossa página web.
Indo para nossa página web,
você pode ver que agora
todos os links de mídia social lá foram transformados em botões de mídia social lá.
Indo para a página sobre,
você verá a mesma coisa na página sobre também.
Agora que você concluiu este exercício,
este pode ser um bom momento para fazer um bom commit com a mensagem, fontes de ícone.