How to vertically align text with icon font?

I’ve a very basic HTML which mix plain text and icon fonts:

<div class="ui menu">
  <a href="t" class="item"><i class="large home basic icon"></i><span class="nav-text"> Accueil</span></a>
  <a href="" class="item"><i class="large camera retro icon"></i><span class="nav-text"> Créations</span></a>
  <a class="item"><span class="nav-text">Qui-suis je </span><i class="large help basic icon"></i></a>
</div>

The problem is that icons are not exactly rendered at the same height than the text:

enter image description here

Any suggestion to fix it?


solution

You could add vertical-align:middle to the span elements:

UPDATED EXAMPLE HERE

.nav-text {
  vertical-align:middle;
}