5

Tenho a seguinte estrutura utilizando o bootstrap e fontawesome

.social-rodape{
    margin-top: 35px;
}

.social-rodape ul li a {
    padding: 10px 12px;
    border-width: 0;
    color: #37a8ab;
    font-size: 30px;
}
.social-rodape ul li:hover a{
    background-color: #37a8ab;
    color: #fff;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<section class="container">
 <div class="col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-12 social-rodape">
                <ul class="list-unstyled list-inline">
                    <li><a href="#" class="img-circle"><i class="fa fa-facebook-square"></i></a>
                    </li>
                    <li><a href="#" class="img-circle"><i class="fa fa-instagram"></i></a>
                    </li>
                    <li><a href="#" class="img-circle"><i class="fa fa-twitter"></i></a>
                    </li>
                    <li><a href="#" class="img-circle"><i class="fa fa-google-plus"></i></a>
                    </li>
                    <li><a href="#" class="img-circle"><i class="fa fa-youtube"></i></a>
                    </li>
                </ul>
            </div>
            <!--col-md-4 col-sm-4 col-xs-12 social-rodape-->
</section>

Porém esperando que houvesse um círculo ao passar o mouse sobre os ícones fica desta forma:

inserir a descrição da imagem aqui

Isto só ocorre no Google Chrome demais navegadores como o Internet Explorer e Firefox estão normais.

Alguém sabe como resolver este problema?

1
  • Pelo bom uso do snippet +1
    – Syzoth
    7/01/2015 às 17:15

1 Resposta 1

4

Tente colocar display:inline-block.

.social-rodape ul li a {
    padding: 10px 12px;
    border-width: 0;
    color: #37a8ab;
    font-size: 30px;
    display: inline-block
}
3
  • 1
    display:block; também funciona, já que ele está controlando o vertical flow no elemento li.
    – OnoSendai
    7/01/2015 às 17:08
  • 1
    Na verdade, eu errei, o ideal nem é colocar no hover. Todavia já editei a resposta. 7/01/2015 às 17:09
  • 1
    Obrigado funcionou e exibiu corretamente (: 7/01/2015 às 17:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .