为什么css字体图标不能居中

Question

<style typpe="text/css">
.test{
    display: inline-block;
    width: 5rem;
    height: 5rem;
    text-align: center;
    color: #FFF;
    background: #F00;
    line-height: 5rem;
}
</style>
<a href="" class="test"><i class="iconfont icon-setting"></i></a>

为什么字体图标不是垂直居中的

字体源文件里面是居中的

Answer 1

iconfont::before {
  vertical-align: middle;
}

Answer 2

垂直方向设置下。试试

Answer 3

_ 不也没居中么

---

哈哈，这样回答太不负责任了，良心发现了，给你详细解释下。

我怀疑你生成字体的时候就是偏的，就像我给你解释的下划线也是不居中的。