Align items within an li not li within an ul

Question

I am trying to align the love heart below the 'A' without much luck, I have tried padding but it affects the li which fit nicely.

<li class="dropdown-link link-menu-item">                                                                                                    
    <a href="/academic-diaries.htm">Academic Diaries</a>                                                                                                       
    <i class="fa fa-heart orange"></i>                                                                                                
</li>

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

http://jsfiddle.net/xo9y31uk/ - I cant get it to mimic what I am seeing. Seems to be doing it right on jsfiddle

Answer 1

Use span to include the heart in the line. Span is a way to have a separate element but include it inside another.

HTML

<li class="dropdown-link link-menu-item">    
    <span class="fa fa-heart orange"></span>   
    <a href="/academic-diaries.htm">Academic Diaries</a>
</li>

For a demo click here