css - Font Awesome's fa-spin spinning around wrong center -

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

i have replaced bootstraps glyphicon font awesome's

fa fa-cog fa-spin 

but cog spinning out of boundaries if center not on same line text. can see there issue thesizing, cannot figure out where, idea doing wrong?

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

you have problem in text indent

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

and change class rules

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