#04 - construindo o header do projeto e buscando ícones no Iconify
- #HTML
Agora vamos começar a construir o nosso projeto, começando pelo nosso cabeçalho. De início temos um ícone e um título, nada muito complexo. Primeiro vamos adicionar nosso ícone, para isso vamos até o site do Iconify ( sempre utilizo ele nos meus projetos, mas estou aberto a conhecer outros, é só mandar o nome nos comentários que eu dou uma olhada): https://iconify.design/.
Os ícones do Iconify são de código aberto, e licenciados sob licença Apache 2.0, GPL 2.0 e MIT, sendo que, segundo o site, as licenças do Apache 2.0 e do MIT permitem praticamente qualquer coisa, incluindo uso comercial. Eu sempre procuro utilizar ícones sob a licença MIT por já utilizar ela nos meus projetos de código aberto no github.
no link https://icon-sets.iconify.design/ temos acesso a todos os ícones do Iconify, na barra de pesquisa digitamos a palavra “magnifying glass”, que significa lupa em inglês. Depois de escolhermos a lupa, basta clicar no ícone e rolar a página para baixo até encontrar os códigos necessários para aplicar no nosso projeto.
Primeiro vamos aplicar o código final, que nos dá acesso aos ícones, sem ele não vamos poder ver os ícones no nosso site. Vamos pegar o script js e adicionar acima da tag de fechamento do body da nossa página, da seguinte forma:
<body>
<header class="c-header">
</header>
<main class="container-general">
</main>
<footer class="footer">
</footer>
<script src="https://code.iconify.design/iconify-icon/1.0.0-beta.3/iconify-icon.min.js"></script>
</body>
Após isso, pegamos o código do componente de ícone e adicionamos dentro da tag header, sendo que precisamos adicionar uma classe para podermos modificar cor e tamanho do ícone no nosso CSS, posteriormente. Por fim teremos o seguinte código:
<body>
<header class="c-header">
<iconify-icon class="c-header__icon" icon="foundation:magnifying-glass"></iconify-icon>
</header>
<main class="container-general">
</main>
<footer class="footer">
</footer>
<script src="https://code.iconify.design/iconify-icon/1.0.0-beta.3/iconify-icon.min.js"></script>
</body>
Agora, para concluir nosso header, tudo que precisamos fazer é adicionar nosso título abaixo do ícone:
<h1 class="c-header__title-app">Decoder</h1>
As tags de título são 6 ao todo e seguem uma hierarquia, sendo a tag <h1> o título de maior nível e a tag <h6> a de menor nível. Só podemos usar uma tag <h1> em cada página, pois ela seria nosso título principal, de destaque, já as demais tags da <h2> até a <h6> podem ser utilizadas mais de uma vez.
<body>
<header class="c-header">
<iconify-icon class="c-header__icon" icon="foundation:magnifying-glass"></iconify-icon>
<h1 class="c-header__title-app">Decoder</h1>
</header>
<main class="container-general">
</main>
<footer class="footer">
</footer>
<script src="https://code.iconify.design/iconify-icon/1.0.0-beta.3/iconify-icon.min.js"></script>
</body>
Acima você pode ver o nosso body completo, atual. Agora vamos seguir para a nossa main, onde teremos uma divisão em duas partes para separar nosso código, mas como fazer isso de forma o mais semântica possível? Mas isso é assunto para o próximo artigo, um abraço e até a próxima.
artigo original: https://francileudo-frontend.blogspot.com/2022/08/04-construindo-o-header-do-projeto-e.html
