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

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/

cssfont-awesome


Solution 1:[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
}

Solution 2:[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>

Solution 3:[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" />

Solution 4:[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.

Solution 5:[5]

Inspect the image tag. The CSS padding-right caused all the issues for me.

Solution 6:[6]

For me, it just needs

display: flex;
align-items: center;

Eg:

<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>

note: I use bootstrap

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Nimantha
Solution 3 Rouan van der Ende
Solution 4 Nimantha
Solution 5 Geoff Wells
Solution 6 trí nguy?n

Related Questions