Carregando...

ícones de Redes Sociais em html e css

Postado: 14 de fevereiro de 2024 Tempo de Leitura: 2 Minutos

ícones de Redes Sociais em html e css

ícones de Redes Sociais em html e css

Neste artigo veja como estilizar ícones de Redes Sociais em html e css.

Estrutura Base que vamos usar no projeto!

A estrutura base do nosso pequeno projeto para os ícones vai ser composto por apenas dois arquivos, por ser apenas dois arquivos, não será algo muito complexo de realizar, o primeiro arquivo será o index.html e o segundo style.css.

Portanto, crie uma pasta CSS, para inserir o arquivo style.css, a mesma regra serve se você estiver usando scripts crie pastas para organizar o seu projeto seja qual for organização é fundamental para organização e manutenção no futuro.

Nesta seção, projetaremos uma estrutura simples nas tags <div><a> e a tag <i> para inserirmos os ícones. 

Essa tag que usaremos para criar os nossos ícones de Redes Sociais em html e css.

A primeira coisa que você deve fazer é colocar todas as tags básicas que são essenciais independente de qual projeto esteja sendo desenvolvido.

Nesta seção, usaremos algumas as tags HTML para montar a estrutura dos ícones.

Estrutura Código Html:

    <!--INSIRA ESTE LINK NO </head> DA SUA PÁGINA HTML-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
   
    <div class="social">

        <a href="#" target="_blank">
          <i class="fab fa-facebook-f"></i></i>
        </a>

        <a href="#" target="_blank">
          <i class="fab fa-instagram"></i>
        </a>

        <a href="#" target="_blank">
          <i class="fab fa-twitter"></i>
        </a>
        
        <a href="#" target="_blank">
          <i class="fab fa-youtube"></i>
        </a>

        <a href="#" target="_blank">
          <i class="fab fa-pinterest"></i>
        </a>

    </div><!--Social-->

Estrutura Código CSS

Para conseguirmos o efeito desejado nos icones, vamos adicionar algumas propriedades CSS para as tags que foram colocadas na sessão HTML que usamos.

Portanto, você pode criar um arquivo style.css, coloque todo o código que se encontra logo mais abaixo.

Nesta seção, usaremos algumas propriedades CSS para estilizar os nossos ícones.

.social {

  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
  font-size: 28px;

}

.social a {

  color: #2D1F28;
  text-decoration: none;
  margin: 10px;

}

.social:hover a {

  opacity: 0.3;
  transition: 0.5s;

}

.social:hover a:hover {

  opacity: 1;
  transition: 0.5s;

}

Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

ícones de Redes Sociais em html e css

Baixar Código Veja Funcionando

Neste artigo, você aprendeu o passo a passo de como estilizar ícones de Redes Sociais em html e css. existem diversas formas de estilizar os ícones com efeitos, cores, formas e animações diferentes.

Fica o desafio para você tentar criar um novo design do zero a criatividade é sua.

faça um exemplo e comente aqui em baixo e deixe um link do seu desafio.

A imaginação é mais importante que o conhecimento. O conhecimento é limitado, enquanto a imaginação abraça o mundo inteiro, estimulando o progresso, dando à luz à evolução.– (Albert Einstein)

Publicado por: Loop Nerd

79 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados