title: Position font awesome span icon above text within an anchor
body: <p>I'm trying to make some buttons with text positioned below a font awesome icon where both are positioned centrally inside a list item, and I need the anchor element, which also contains the span element for the font awesome icon, to fill the entire size of the list item.</p>
  
  <p>I can fill the list item with the anchor no problem, but I'm having trouble positioning the icon's span above the text in the anchor that contains it.</p>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/qod142fz/" rel="nofollow noreferrer">https://jsfiddle.net/qod142fz/</a>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="sidebarPrimary"&gt;
  
          &lt;ul id="sidebarPrimaryNav"&gt;
  
              &lt;li class="navButton"&gt;&lt;a href="#"&gt;&lt;span class="fa fa-home"&gt;&lt;/span&gt;Home&lt;/a&gt;&lt;/li&gt;
  
              &lt;li class="navButton"&gt;&lt;a href="#"&gt;&lt;span class="fa fa-user"&gt;&lt;/span&gt;Personal Details&lt;/a&gt;&lt;/li&gt;
  
              &lt;li class="navButton"&gt;&lt;a href="#"&gt;&lt;span class="fa fa-briefcase"&gt;&lt;/span&gt;Company&lt;/a&gt;&lt;/li&gt;
  
              &lt;li class="navButton"&gt;&lt;a href="#"&gt;&lt;span class="fa fa-gbp"&gt;&lt;/span&gt;Invoices&lt;/a&gt;&lt;/li&gt;
  
              &lt;li class="navButton"&gt;&lt;a href="#"&gt;&lt;span class="fa fa-address-book"&gt;&lt;/span&gt;Contacts&lt;/a&gt;&lt;/li&gt;
  
              &lt;li class="navButton"&gt;&lt;a href="#"&gt;&lt;span class="fa fa-minus"&gt;&lt;/span&gt;Expenses&lt;/a&gt;&lt;/li&gt;
  
              &lt;li class="navButton"&gt;&lt;a href="#"&gt;&lt;span class="fa fa-list"&gt;&lt;/span&gt;Payslips&lt;/a&gt;&lt;/li&gt;
  
              &lt;li class="navButton"&gt;&lt;a href="#"&gt;&lt;span class="fa fa-cog"&gt;&lt;/span&gt;Settings&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* SIDEBAR PRIMARY */
  
  #sidebarPrimary
  {
  position: fixed;
  width: 15vw;
  height: 100%;
  top: 0;
  left: 0;
  background: #2F323E;
  }
  
  #sidebarPrimary &gt; ul
  {
  margin: 0;
  padding: 0;
  list-style-type: none;
  }
  
  #sidebarPrimary &gt; ul &gt; li.navButton
  {
  width: 100%;
  height: 15vw;
  }
  
  #sidebarPrimary &gt; ul &gt; li.navButton &gt; a
  {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #687381;
  font-size: 12px;
  font-weight: 500;
  transition: all linear 0.05s;
  -webkit-transition: all linear 0.05s;
  -moz-transition: all linear 0.05s;
  }
  
  #sidebarPrimary &gt; ul &gt; li.navButton &gt; a:hover
  {
  text-decoration: none;
  color: #fff;
  background: #E95656;
  }
  
  #sidebarPrimary &gt; ul &gt; li.navButton &gt; a &gt; span
  {
  display: block;
  text-align: center;
  margin-bottom: 5px;
  }
  </code></pre>