Question

我正试图在物化css进度/确定div上显示一个fontawsome图标。但没有运气。图标显示但不完全是剪切/隐藏的一部分。我尝试了很多解决方案但没有帮助。

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

下面是显示它应该是什么样子的图像。但即使经过数小时的挣扎，我也无法弄清楚如何实现这一目标。在图像中，圆圈是fa-circle图标

以下是我试过的一些帖子

First
Second
Third

尝试了其他几件事，但可以让它发挥作用。任何帮助将不胜感激。提前致谢。

Answer 1

你的.progress溢出被隐藏了，所以让它可见

.progress {

     overflow: visible;

     }

Answer 2

这是解决方案

http://codepen.io/Bhupinderkumar/pen/dOLOPJ在这里查看我使用codepen创建并获得解决方案，或者您只需要添加此

.progress{ overflow:inherit!important }

Answer 3

您的.progress overflow为hidden，因此请通过添加以下代码使其显示，

.progress{
  overflow:visible !important;
}

！important - 通过向您的CSS溢出属性添加!important，您可以告诉其他重要规则，并先应用此规则。

＆＃13;

.progress{
  overflow:visible !important;
}
.progress .determinate {
  width:70%;
}
.progress .determinate .fa {
  position:absolute;
  top:-5px;
  right:0;
 }

＆＃13;

<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">

<div class="col l9 m9 s9 ">
  <div class="col l12 m12 s12">
    <div class="progress">
      <div class="determinate">
        <i class="fa fa-circle"></i>
      </div>
    </div>
  </div>
</div>

＆＃13;

字体awsome图标不会出现在Materialise css progress / determinate

3 个答案:

这是解决方案