I have a simple nav menu in which I want to add icons to the icon should appear above the text in the center. However I cannot seem to figure out how to do this. Below is my code:

HTML Code:
 <ul class="nav">
      <li class="whoweare"><a href="#">who we are</a></li>
      <li class="services"><a href="#">services</a></li>
      <li class="contact"><a href="#">contact</a></li>
  </ul>
Code:
ul.nav {
	list-style: none; /* this removes the list marker */
	border-top: 20px solid #FFF; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	/*margin-bottom: 15px;  this creates the space between the navigation on the content below */
}
ul.nav li {
	float: left;
	text-align:center;
	width: 23%;
	/*border-bottom: 1px solid #666;  this creates the button separation */
}
I have tried an after class but that doesn't seem to work either.