Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

footer link redes sociais

por Estudante
| 231.9k xp | 114 posts

Gostaria de saber como faço para linkar imagens que direcionam para redes sociais e se as redes sociais disponibilizam o link iframe para botoes em páginas? 


        <footer class="page-footer">
          <div class="container">
            <div class="row">
              <div class="col l6 s12">
                <h5 class="white-text"> Quer o zem na sua cidade? </h5>
                <p class="grey-text text-lighten-4"> Faça parte deste movimento e preencha o formulário clicando abaixo.</p>

                <a class="waves-effect waves-light btn green" href="assine.html"> Clique aqui</a>
              </div>
              <div class="col l4 offset-l2 s12">
                <h5 class="white-text">Siga nossas redes sociais</h5>
                <center>
                <ul>
                 <h6 class="white-text">contato@xxxx<h6>
                 <a><img href="#!" src="materialize/img/icons/facebook.png"></a>
                 <a><img href="#!" src="materialize/img/icons/twitter.png"></a>
                 <a><img href="#!" src="materialize/img/icons/youtube.png"></a>
                 <a><img href="#!" src="materialize/img/icons/instagram.png"></a>
                </ul>
                </center>
              </div>
            </div>
          </div>
1 resposta
solução!
por Rafael Silva Nercessian
| 1050.9k xp | 1530 posts
Instrutor

Olá Nicolle, tudo bem?

Existem algumas formas de se fazer isso, uma das formas seria você colocar uma tag <a> com um link para uma página e com um texto, por exemplo:

<a href="http://www.facebook.com">Facebook</a>

No css você faz um text-indent para esse texto sair da tela e você faz uma backgroud-image para a imagem que você deseja, por exemplo:

.social li a {
  /* tamanho da imagem */
  height: 32px;
  width: 32px;

  /* faz o indent no texto inserido */
  color: transparent;
  display: block;
  text-indent: -9999px;  
}

.social a[href*="facebook.com"] {
  background-image: url(/imagem/facebook.png);
}

Segue link ilustrando esse cenário: http://www.mirrorfashion.net/

Abs