Font Awesome fa-spin在错误的中心周围旋转

Question

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

我已经用字体真棒替换了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>

它对我有用。

Answer 3

检查图像标签。 CSS padding-right为我带来了所有问题。