Q:

Cannot horizontally center two font-awesome icons in container

I've made some research here and tried all i can but those icons don't want to be centered.  Don't hurt yourself with those &nbsp, margin doesn't seems to work..

    [class^="icon-"], [class*=" icon-"] {
        display: inline-block;
        width: 100%;
    }
    td a {
      text-align:center;
    }
    .fa-phone {
        color: #86b545;
    }
    .fa-map-signs{
        color: #86b545;
    }
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<table>
  <tr>
    <td><a class="fa fa-phone fa-3x" href="tel:+33500000000"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a class="fa fa-map-signs fa-3x" href="https://www.google.com/maps/place/Acttif+Littoral/@47.2957248,-2.2068371,15z/data=!4m2!3m1!1s0x0:0x358670f7109ad0d7?ved=2ahUKEwjMl8zni8rgAhULAWMBHftSDJIQ_BIwCnoECAYQCA"></a> </td>
    </tr>
</table>

A:

It's best not to use a table layout for this. 
<div class="icon-layout">
    <a class="fa fa-phone fa-3x" href="tel:+33500000000"></a>
    <a class="fa fa-map-signs fa-3x" href="https://www.google.com/maps/place/Acttif+Littoral/@47.2957248,-2.2068371,15z/data=!4m2!3m1!1s0x0:0x358670f7109ad0d7?ved=2ahUKEwjMl8zni8rgAhULAWMBHftSDJIQ_BIwCnoECAYQCA"></a>
</div>

CSS
.icon-layout {
  vertical-align: middle;
  // if you want icons centered horizontally
  text-align: center
}
.icon-layout a {
  display: inline-block;
}
.icon-layout a:last-child {
  margin-left: 10px;
}

Give that ago

