Cannot horizontally center two font-awesome icons in container - html

Question

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:[phone]"></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> </td>
</tr>
</table>

Answer 1

It's best not to use a table layout for this.
<div class="icon-layout">
<a class="fa fa-phone fa-3x" href="tel:[phone]"></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

Answer 2

Reformatting markup for readability & adding a new class center to td
<td class="center">
<a class="fa fa-phone fa-3x" href="tel:[phone]" />
<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"
/>
</td>
You can then do
.center {
display: flex;
justify-content: center;
}