inline <li> ogni dispari

[cippecciopp]

Ciao a tutti, mi sto cimentando nel design del mio primo sito web (il mio) ed ho subito iniziato con una cosa probabilmente troppo difficile per le mie scarse conoscenze.
Vorrei creare un menu orizzontale in cui ogni link è composto da due <li>, il primo con un'icona, il secondo, a capo e centrato, con il testo del link, esempio:

icona
homepage

Sono in qualche modo riuscito tra html e css, inglobando due elementi <li> in un elemento <a> ed usando display inline e display block con pseudo elementi. Il problema è che così facendo mi sono trovato con il blocco <ul> senza altezza e credo che ciò sia male, anche perchè a causa di questo fenomeno, mi si forma un margine al fondo del menu che non voglio avere.
Incollo un po' di codice così che si capisca meglio cos'ho combinato. Spero che qualcuno mi sappia illuminare perchè io è da diverse settimane che non riesco ad andare avanti.
Grazie in anticipo.

HTML:

<nav role="Navigation">
   <a href="#content" title="Skip to content">Skip to content</a>
      <ul id="mainNav">
         <a href="index.html" title="Homepage" class="active">
            <li class="fa fa-home"></li>
            <li>Home</li>
         </a>
         <a href="blog.html" title="My Blog" >
            <li class="fa fa-comments"></li> 
            <li>Blog</li>
        </a>
        <a href="#" title="Resources">
           <li class="fa fa-folder"></li>
           <li>Downloads</li>
       </a>
       <a href="#" title="Contact me">
          <li class="fa fa-pencil"></li>
          <li>Contact</li>
      </a>
   </ul>
</nav>

CSS:

#mainHeader nav {
    display: inline-block;
    margin: 0;
    border: 2px solid black;
    padding: 0;
}
#mainNav li {
    text-align: center;
    font-size: 1.55em;
    margin: 0px 1em;
    text-shadow: 1px 1px .5px #6c95a1;
    display: inline;
}
#mainNav li::first-letter {
    padding: 0px;
    margin: 0px;
    line-height: 0em;
    color: #99773d;
}
#mainNav li:nth-child(odd) {
    font-size: 2em;
    text-shadow: none;
    display: block;
}

PS il #mainHeader non è altro che un div che contiene un colore di sfondo ed un bordo, assieme al logo ed il campo 'cerca'