twitter-bootstraptwitter-bootstrap-3font-awesomefontawesome-4.4.0

vertical alignment of stacked icons in font awesome

I can't manage to vertically align a stacked icon fa-stack to a normal icon fa-fw in Font awesome 4.7 and bootstrap 3:

<span class="fa-stack">
  <i class="fa fa-fw fa-dot-circle-o fa-stack-1x text-danger"></i>
  <i class="fa fa-fw fa-circle-o fa-stack-1x text-info"></i>
</span> <strong>Company Ltd.</strong><br>
<i class="fa fa-fw fa-map-marker"></i> Street 7<br>

I made a jfiddle to illustrate: https://jsfiddle.net/tjykrv7q/ screenshot

Solution

  • it seems like the class "fa-stack" sets an margin of 5px to your Icons.. You can add "marging: -5px" to fix this like:

    <span class="fa-stack" style="margin: -5px;">

    https://jsfiddle.net/tjykrv7q/2/