CODEWITHSUNDEEP
htmlcssfont-awesome
JensOlsen112
JensOlsen112

Reputation: 1299

"right" never changes the vertical alignment?

I'm trying to put a font awesome to the bottom right corner of an another font awesome icon. I've come up with the following:

 <span class="fa-stack">
    <i class="fa fa-shopping-cart fa-stack-2x"></i>
    <i style="color:red;" class="fa fa-ban fa-stack-1x text-danger overlay-lower-right"></i>
</span>

.overlay-lower-right {
    position: absolute;
    bottom: -10px;
    right: -20px;
}

However apparently no matter what I put as the right value the icon ALWAYS stays horizontally centered. Only when I input left it changes.

What's the problem here? All I'm trying to do is to position the icon all the way to the right.

Here's a jsFiddle with the code: http://jsfiddle.net/yjh0a23w/1/

Upvotes: 1

Views: 86

Answers (1)

pavel
pavel

Reputation: 27092

In font-awesome.css you set left: 0 for .fa-stack-1x.

To fix that, you have to reset left using left: auto; and then set right position.

.overlay-lower-right {
    position: absolute;
    bottom: -10px;
    right: -20px;
    left: auto; /* this line reset left: 0; */
}

http://jsfiddle.net/yjh0a23w/2/

Upvotes: 1

Related Questions