Awesome fa-spin font revolves around the wrong center

Question

I use this switch menu template: http://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle .

I replaced bootstraps glyphicon with awesome font

fa fa-cog fa-spin 

but cog rotates out of bounds, as if the center were not on the same line as the text. I see that there are some problems with the thesis, but I can’t understand where, any idea, what am I doing wrong?

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

Answer 1

You have a problem with text indentation

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

And change the rules of this class

 .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 must align the icon.

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

This works for me.

Answer 3

Check image tag. CSS padding-right caused all the problems for me.