Pourquoi l'espace (indiqué sur l'image) est ajouté ci-dessous lors de l'utilisation de l'alignement vertical? Comment le réparer?

Image

HTML

<div class="datePosted">
    
23
 
</div>

CSS

.datePosted h6{
    font-size: 1em;
    /*background-image: url(../Images/view4.png);
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 20px;*/
    padding-right: 6px;
    float: right;
    color: #FFFFFF;
    text-align: right;
}
.eyeIcon {
    text-indent: -9999px;
}
.eyeIcon:before{
    font-family: "foundicons";
    -webkit-font-smoothing: antialiased;
    -o-transform: scale(1);
    text-rendering: optimizeLegibility;
}
.eyeIcon:before{
    content: "\f005";
    vertical-align: middle;
    /*position: relative;
    top: 3.5px;  works nicely with this*/
    padding-right: 3px;
    font-size: 1.1em;
}

Je veux aligner le eye icon verticalement centré sur le texte 23, mais en utilisant vertical-align: middle , il fait quelque chose comme l'image ci-dessus. Comment cela peut-il être réparé?

0