Search code examples
cssfont-awesomematerialize

Font awsome icon not coming on top of Materialize css progress/determinate

I'm trying to show a fontawsome icon to come on top of a materialize css progress/determinate div. But with no luck. the icon shows but not completely part of it is clipped/hidden. I have tried a lot of solution but no help.

.progress .determinate {
  overflow: visible;
  z-index: 1;
}
.progress .determinate .fa {
  position: absolute;
  top: -5px;
  font-size: 12px;
  right: 0px;
  visibility: visible;
  z-index: 9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"></script>

<div class="col l9 m9 s9 ">
  <div class="col l12 m12 s12">
    <div class="progress">
      <div class="determinate" style="width:70%">
        <i class="fa fa-circle"></i>
      </div>
    </div>
  </div>
</div>

Below is the image showing what it should look like. But i m not able to figure out how to achieve this even after hours of struggling. In the image the circle is the fa-circle icon

In the image the circle is the <code>fa-circle</code> icon

Below are some of the posts i have tried

  1. First
  2. Second
  3. Third

Tried several other things but could make it work. Any help will be appreciated. Thanks in advance.

Solution

  • Your .progress overflow is hidden, so make it visible 

    .progress {

     overflow: visible;

     }