Font Awesome的旋转旋转错误的中心

Question

我正在使用此切换菜单模板:http://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle.

我用字体awesome替换了bootstraps glyphicon

fa fa-cog fa-spin

但是齿轮旋转出边界,好像中心与文本不在同一条线上.我可以看到大小有一些问题,但我无法弄清楚在哪里,任何想法我做错了什么？

JSFiffle:https://jsfiddle.net/vidriduch/mpw2r8h2/1/

Answer 1

您在文本缩进中遇到问题

.sidebar-nav li {
    line-height: 40px;
    text-indent: 20px; //Remove this rule and use margin
}

并改变这个类规则

.sub_icon {
    float: right;
    margin-right: 10px;
    margin-top: 10px;
    padding-right: 65px; // remove it
    padding-top: 10px;// remove it
}

Answer 2

我终于找到了解决方法：

您必须对齐图标。

<i style='text-align: center;' class='fa fa-cog fa-spin' ></i>