Align elements inside an <a> tag vertically

Question

I have an <a> tag (which is part of multiple <li> tags). In the <a> tag I have an <i> tag and some text - the text of the link.

What I would like to achieve is to have the icon on top and the text under it (and then centered). So it would look like:

   ICON
MYTEXTHERE

However they are always placed next to each other. I tried using display: inline-block - because my <a> is inline and the content inside should be block but without success.

The fiddle is here: https://jsfiddle.net/6mg4vt77/5/

Edit: Thanks for the answers but sadly I forgot to mention that I must support IE9.

Answer 1

try this

<a href="/items/bluetooth" style="display: inline-block; text-align:center">
  <i class="fa fa-bluetooth"></i>
  <br>
  BLUETOOTH
</a>

https://jsfiddle.net/6mg4vt77/7/

Answer 2

Quick answer, set the icon to 100% wide and center everything in the anchor.

a{
  text-align: center;
}

a .fa {
  width: 100%;
}

JSfiddle Demo

Modern Method

Flexbox:

a {
  border: 1px solid grey;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<a href="/items/bluetooth">
  <i class="fa fa-bluetooth"></i> BLUETOOTH
</a>