Font Awesome fa-spin 绕着错误的中心旋转

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
}

并更改此 class 规则

.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 给我带来了所有问题。

Answer 4

我用 flexbox 解决了这个问题，遇到了类似的问题。
只需添加：

text-align: center;
display:flex;
align-items: center;
justify-content: center;

此外，由于您的代码是左对齐的，因此您必须添加 margin-right: (pixels); 以根据您的代码对齐。

Answer 5

对我来说，只需在顶部添加 2px 填充即可。

<i className="far fa-lg fa-spin fa-cog" style="padding-top: 2px" />

Answer 6

对我来说，刚好需要

display: flex;
align-items: center;

例如：

<div class="row">
    <label class="col-3">Label col</label>
    <input class="col-3 form-control" />
    <i class="fa fa-spinner fa-spin " style="display: flex; align-items: center;"></i>
</div>

注意：我用的是bootstrap

Font Awesome fa-spin 绕着错误的中心旋转

Font Awesome's fa-spin spinning around wrong center

css

font-awesome