在导航栏中使图标和文本垂直对齐（堆叠模式）

Question

如何在导航栏上垂直对齐文本和图标。 就像我附上的图片一样：

Answer 1

我终于得到了答案......所以这是其他可能想要制作类似案例的剧本。

CSS：

<link href="bootstrap/icomoon.css" rel="stylesheet">
<style>

.crozmap-body #crozmap-footer {
  background: #ed6c09;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1001;
}
.crozmap-body #crozmap-footer ul {
margin-left: -15px;
margin-right: -15px;
list-style: none;
margin: 0;
padding: 0;
}
.crozmap-body #crozmap-footer ul li {
position: relative;
float: left;
width: 25%;  //this is for 4 column 25%
min-height: 1px;
padding-left: 0;
padding-right: 0;
cursor: pointer;
height: 50px;
text-align: center;
}
.crozmap-body #crozmap-footer ul li a {
color: #fff;
display: block;
height: 50px;
text-align: center;
padding-top: 8px;
font-size: 13px;
}
.crozmap-body #crozmap-footer ul li a:before {
font-family: "icomoon";
color: #fff;
font-weight: bold;
font-size: 20px;
display: block;
}

.crozmap-body #crozmap-footer ul li a:hover {
background-color: #ed9959;
text-decoration: none;
}

.crozmap-body #crozmap-footer ul li a:hover:before {
background-color: #ed9959;
}

</style>

HTML：

<div id="crozmap-footer">
    <ul>    
        <li><a class="icon-share" data-toggle="modal"     data-target="#SharedModal">Share</a>

        <li><a class="icon-bubble" data-toggle="modal" data-target="#CommentInfoModal"> Comments </a></li>

        <li><a class="icon-file" data-toggle="modal" data-target="#CommentInfoModal">Info</a></li>

        <li><a class="icon-location" href="#" >Dir</a></li>
    </ul>
</div>