como colocar um icone do lado do outro no site?
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
como colocar um icone do lado do outro no site?
Oi, Geovane, tudo bem?
Para deixar os elementos em linha, você tem algumas opções, uma delas é o inline-block que foi o que usei. Segue o exemplo:
<body>
<footer>
<nav class="social-medias">
<ul class="itens">
<li class="itens-icon">
<a href="#"><img src="instagram.png" /></a>
</li>
<li class="itens-icon">
<a href="#"><img src="twitter.png" /></a>
</li>
<li class="itens-icon">
<a href="#"><img src="linkedin.png" /></a>
</li>
</ul>
</nav>
</footer>
</body>E o css:
.social-medias{
width: 100%;
height: 10rem;
margin: 0 auto;
}
.itens{
width: 500px;
height: 100px;
}
.itens-icon{
display: inline-block;
list-style: none;
margin: .5rem;
}
.itens-icon > a{
text-decoration: none;
}
.itens-icon > a > img{
width: 20px;
height: 20px;
}O resultado:
Para saber mais: https://www.w3schools.com/css/css_inline-block.asp