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?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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!