Font Awesome's fa-spin spinning around wrong center

Question

I'm using this toggle menu template: http://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle .

I have replaced bootstraps glyphicon with font awesome's

fa fa-cog fa-spin

but the cog is spinning out of boundaries as if the center is not on the same line as the text. I can see that there is some issue with thesizing, but I cannot figure out where, any idea what am I doing wrong?

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

Answer 1

You have a problem in the text indent

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

And change this class rules

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

Answer 2

I finally found how to fix it :

You have to align the icon.

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

Answer 3

For me it worked to just add 2px padding to the top.

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

Answer 4

I solved this using flexbox, had a similar problem.
Just add:

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

Also, because your code is aligned to the left, you will have to add margin-right: (pixels); to align it according to your code.