Na primeira aula da imersão front-end, a Mayara importa o CDN para utilização dos ícones do Spotify.
Foi linkado na descrição da aula as URLs, mas fiquei na dúvida de onde tiraram esses atributos integrity e crossorigin?
Solucionado
Na primeira aula da imersão front-end, a Mayara importa o CDN para utilização dos ícones do Spotify.
Foi linkado na descrição da aula as URLs, mas fiquei na dúvida de onde tiraram esses atributos integrity e crossorigin?
Oi, Paola, tudo bem?
As propriedades integrity e crossorigin são atributos usados em elementos <link> para fornecer informações adicionais sobre o carregamento de recursos externos.
O atributo integrity é usado para garantir a integridade do recurso externo que está sendo referenciado. Ele contém um valor hash criptográfico , neste caso o valor sha384, que representa a integridade do recurso. O navegador compara esse valor hash com o hash do recurso baixado para garantir que não foi alterado ou corrompido durante o processo de transferência. Isso ajuda a prevenir ataques como injeção de código malicioso ou substituição de recursos por versões comprometidas.
O atributo crossorigin especifica como o navegador deve tratar as solicitações de recursos de origens diferentes (cruzadas). Ele é relevante quando você está carregando recursos de um domínio diferente do seu próprio. Os valores comuns para crossorigin são anonymous e use-credentials.
anonymous: indica que as solicitações não devem incluir credenciais (como cookies ou cabeçalhos de autenticação).use-credentials: indica que as solicitações devem incluir credenciais.Caso queira mais informações sobre os atributos da tag <link>, recomendo a leitura desta documentação.
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!
Oi Rodrigo! Valeu pela ajuda
Não estou conseguindo inserir o ícone conforme feito pela Mayara na aula em questão. Pode revisar se está de acordo? Parece estar exatamente como o código postado aqui: https://github.com/RodrigoHarder/imersao-frontend/blob/main/spotify-imersao-alura-aula-01/index.html
Seria para ser colocado ali no <span class="fa fa-home"></span>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spotify Imersão - Web player: música para todas as pessoas</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/solid.css" integrity="sha384-Tv5i09RULyHKMwX0E8wJUqSOaXlyu3SQxORObAI08iUwIalMmN5L6AvlPX2LMoSE" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/fontawesome.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
</head>
<body>
<div class="sidebar">
<nav>
<div>
<a href="">
<img src="./assets/icons/logo-spotify.png" alt="Logo do Spotify">
</a>
<div>
<ul>
<li>
<a href="">
<span class="fa fa-home"></span>
<span>Início</span>
</a>
</li>
<li>
<a href="">
<span></span>
<span>Buscar</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
Atualização: Consegui trazer os ícones.
Aparentemente só faltava dar ctrl S mesmo... kkk Aproveitei e dei uma revisada geral no código, precisavam ser feitos alguns ajustes.
Oi, Paola,
Vi que você conseguiu resolver o problema, fico muito feliz com isso. Contudo, mesmo assim, deixo abaixo algumas observações importantes.
Testei o código que você compartilhou e ele está aplicando os ícones corretamente. Como mostro na imagem abaixo, onde deixei o zoom da tela do navegador em 67% e logo abaixo do logotipo do spotify é possível ver a opção de "Início" com o ícone de uma casa.
No caso do ícone da opção "Buscar" ara que você possa usar ele é preciso aplicar a classe fa fa-search à tag <span>referente a essa opção. Ficaria assim:
<li>
<a href="">
<span class="fa fa-search"></span>
<span>Buscar</span>
</a>
</li>
Também é interessante criar nas tags respectivas as mesmas classes criadas pelas instrutoras. Dessa forma, os estilos aplicados a essa parte do código será aplicado corretamente. Deixo abaixo o código HTML com todas as classes utilizadas:
<div class="sidebar">
<nav class="sidebar__navigation">
<div class="logo">
<a href="">
<img src="./assets/icons/logo-spotify.png" alt="Logo" />
</a>
</div>
<ul>
<li>
<a href="">
<span class="fa fa-home"></span>
<span>Início</span>
</a>
</li>
<li>
<a href="">
<span class="fa fa-search"></span>
<span>Buscar</span>
</a>
</li>
</ul>
</nav>
</div>
Continue mergulhando em tecnologia e se tiver dúvidas, conte com o fórum. Abraços!