Tutorial: Ícones Natalinos com Font Awesome

Os ícones são elementos essenciais no design de interfaces. Neste tutorial, você aprenderá como usar o Font Awesome para criar ícones estilizados e personalizá-los com HTML e CSS.

Veja o projeto ao vivo neste link. Ícones Sociais Natalinos.

Veja o vídeo no YouTube:

Passo a Passo

Passo 1: Estrutura Básica do HTML

Crie um arquivo chamado index.html e adicione a estrutura básica do HTML com o link para a biblioteca Font Awesome:



<!DOCTYPE html>

<html lang="pt-br">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Icones Sociais Natalinos</title>

    <link rel="stylesheet" type="text/css" media="screen" href="style.css">

    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css"></link>

</head>

<body>

    <ul class="icon-ornaments">

        <a href="#"><li><i class="fa-brands fa-facebook"></i></li></a>

        <a href="#"><li><i class="fa-brands fa-instagram"></i></li></a>

        <a href="#"><li><i class="fa-brands fa-twitter"></i></li></a>

        <a href="#"><li><i class="fa-brands fa-linkedin-in"></i></li></a>

        <a href="https://github.com/Ninja1375"><li><i class="fa-brands fa-github"></i></li></a>

      </ul>

</body>

</html>

Passo 2: Criando o Arquivo CSS

Agora, crie um arquivo chamado style.css para estilizar os ícones. Use o seguinte código:



*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

body{

    min-height: 100vh;

    background: rgb(130, 15, 15);

    background: radial-gradient(circle, rgb(132, 17, 17) 34%, rgba(51,93,10,1) 81%);

}

ul{

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-top: -90px;

}

ul a{

    color: white;

    text-decoration: none;

}

ul li{

    font-size: 8vmin;

    width: 2em;

    height: 2em;

    display: grid;

    place-items: center;

    border: 0.125em solid;

    border-radius: 50%;

    position: relative;

    filter: drop-shadow(0 0 0.05em black)

}

ul li::before, ul li::after{

    content: "";

    position: relative;

    pointer-events: none;

}

ul li::before{

    width: .75em;

    height: .6em;

    bottom: 100%;

    background-image: linear-gradient(to top, white 50%, transparent 0),

    radial-gradient(circle at center, transparent 30%, 

    white 0 50%, transparent 0);

}

ul li::after{

    width: 0.125em;

    height: 100vh;

    background: white;

    bottom: calc(110% + .5em);

}

ul a:nth-of-type(even){

    margin-top: 10rem;

}

ul a{

    transition: transform .125s ease;

}

ul a:hover{

    transform: scale(1.05);

}

Passo 3: Configurando os Ícones

No HTML, use as classes fornecidas pelo Font Awesome para adicionar os ícones desejados. Aqui estão alguns exemplos:

Facebook: fa-brands fa-facebook

Instagram: fa-brands fa-instagram

Twitter: fa-brands fa-twitter

LinkedIn: fa-brands fa-linkedin-in

GitHub: fa-brands fa-github

Passo 4: Rodando o Projeto

Salve o arquivo index.html e style.css no mesmo diretório.

Abra o arquivo index.html no seu navegador para ver o resultado.

Passo 5: Personalizando o Projeto

Mudança de cores: Edite o background no CSS para aplicar uma nova paleta de cores.

Redimensionamento dos ícones: Altere o valor da propriedade font-size na classe ul li.

Adicionar links reais: No HTML, substitua o # nas tags <a> pelos URLs das suas redes sociais.

Resultado Esperado

Seu projeto terá ícones sociais estilizados como enfeites natalinos, com animações e uma interface visual agradável.

Links Úteis

Font Awesome

Guia Completo de HTML

CSS: Como Dar Estilo ao seu Website

Repositório no GitHub

🎅 Aproveite o clima natalino para adicionar um toque especial aos seus projetos de programação!

Programar Tudo - Blog de Programação

Pesquisar este blog