CODEWITHSUNDEEP
cssfont-awesome
Pavel Vlasov
Pavel Vlasov

Reputation: 4331

Make font-awesome icon not affected by other element's semi-opaque background

Here are overlapping blocks. Each one has a semi-opaque background and a font-awesome icon inside it.

The goal: make icons not lose their brightness because of overlapping.

I tried applying z-index to font-awesome <i>, but with no luck: https://jsfiddle.net/zencd/62psvfos/

How it looks now / How I wanted it to be:

example wanted

Upvotes: 0

Views: 186

Answers (2)

Scott
Scott

Reputation: 5379

Just make the icons relatively positioned:

https://jsfiddle.net/Kredit/62psvfos/1/

Relevant changes:

i {
    position: relative;
}

To improve the existing code, you don't need to supply z-index on .block, and z-indexes are relative. Rather than set crazy z-index numbers like 1000, using 1 accomplishes the same thing (1 layer "higher" than the parent).

.block {
    width: 100px;
    height: 100px;
    line-height: 100px;
    background: rgba(240, 200, 200, 0.8);
    text-align: center;
}

i {
    z-index: 1;
    position: relative;
    outline: 1px dashed black;
}

Upvotes: 3

vals
vals

Reputation: 64244

set position relative to i elements

body { background: white; }
.block {
  width: 100px;
  height: 100px;
  line-height: 100px;
  background: rgba(240, 200, 200, 0.8);
  text-align: center;
  z-index: 10;
}
.block2 {
  position: relative;
  top: -55px; left: 20px;
}
i {
  z-index: 1000;
  outline: 1px dashed black;
  position: relative;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="block">
<i class="fa fa-camera-retro fa-2x"></i>
</div>

<div class="block block2">
<i class="fa fa-camera-retro fa-2x"></i>
</div>

Upvotes: 2

Related Questions