1

Tenho umas divs em que devem ser exibidos alguns ícones do Font Awesome pelo meu css:

.listing-item .listing-meta-cat a
{
   font-size:14px;
   width:30px;
   text-align:center;
   margin-right:5px; 
   border-radius:10%;
   display:inline;
   padding:10px;
}
<div class="listing-meta-cat">
    <a class="bgpurpal-1" href="javascript:void()">
        <i class="fa fa-graduation-cap white"></i>
    </a>

    <a class="bgyallow-2" href="javascript:void()">
        <i class="fa fa-child white"></i>
    </a>
</div>

As classes dos links são apenas sobre cores. O que acontece é que as medidas da div não está ficando perfeita, está como na imagem:

inserir a descrição da imagem aqui

1
  • 1
    Acredito que você tenha duas opções. Uma delas é verificar a folha de css e talvez os icons pra edição(do font awesome). A outra opção seria dar um padding-left e padding-right dentro da tag <a></a> pra dar uma padronizada no width dela. O problema que na segunda opção você terá que corrigir pra cada tipo de icon (por terem width ou padding diferentes acredito eu). Commented 5/09/2016 às 20:27

1 Resposta 1

2

Este comportamento é normal visto que como os ícones estão inseridos dentro da tag <a> que é um elemento inline e não assume altura ou largura.

A largura e altura é determinada pelo seu conteúdo no caso os ícones e por isso uma tem um tamanho diferente da outra.

Para resolver o problema basta definir o display da tag <a> (onde os ícones se encontram) como inline-block permitindo assim definir uma altura e uma largura padronizando a dimensão dos ícones.

Exemplo (Modifiquei o nome das classes para uma melhor organização):

a {
  color: #fff;
}

.icon {
  display: inline-block; /* Altera o display para inline-block */
  margin-right: 5px;
  padding: 10px;
  width: 30px;
  font-size: 14px;
  text-align: center;
  border-radius: 10%;
}

.icon-graduation {
  background-color: #9b59b6;
}

.icon-child {
  background-color: #f1c40f;
}
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<div class="listing-meta-cat">
  <a class="icon icon-graduation" href="javascript:void()">
    <i class="fa fa-graduation-cap white"></i>
  </a>

  <a class="icon icon-child" href="javascript:void()">
    <i class="fa fa-child white"></i>
  </a>
</div>

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 .