How to correctly position the Awesome Font icons in div?

Question

How to correctly position the Awesome Font icons in div?

Navigation

#1 by (2 votes)

1

I have some divs where some Awesome Font icons should be displayed 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 just about colors. What happens is that the div's measurements are not getting perfect, it's like in the image:

css font-awesome

asked by anonymous 05.09.2016 / 22:17

1 answer

Apache2 is not accepting PUT request method Problems writing to an input from the controller

score 2 · Accepted Answer

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

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

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

Example (I have changed the name of the classes for 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>