How to correctly position Font Awesome icons in div?

Asked

Viewed 1,277 times

1

I have some Windows that should display some Font Awesome icons by my 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>

The link classes are only about colors. What happens is that the measurements of the div is not getting perfect, it’s like in the image:

inserir a descrição da imagem aqui

css font-awesome
  • 1

    I believe you have two options. One of them is to check the css sheet and maybe the icons for editing(from the awesome font). The other option would be to give a padding-left and padding-right within the tag <a></a> to give a standardized width of it. The problem that in the second option you will have to fix for each type of icon (because they have width or padding different I believe).

1 answer

2


This behavior is normal since as icons are inserted inside the tag <a> which is an element inline and does not assume height or width.

The width and height is determined by their content in the case of icons and therefore one has a size different from the other.

To solve the problem just set the tag display <a> (where the icons are) as inline-block allowing you to define a height and width by standardizing the size of the icons.

Example (I changed the class name to a better organization):

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>

Browser other questions tagged css font-awesome

You are not signed in. Login or sign up in order to post.