引導4 - <progress>元素

Question

上的文本/圖標我試圖覆蓋在引導4阿爾法進度條上的圖標。

<progress class="progress progress-primary" value="100" max="100"> 
    <i class="fa fa-check-circle-o"></i> 
</progress> 

它應該看起來像下面的（大約）：

相反，我結束了以下內容：

不幸的是，appearance:initial;沒有組合和!important標籤做的伎倆。

我缺少什麼導致該<progress>元素中的文本不顯示？

Answer 1

在引導4，alpha-6的最新版本，這個問題是不是一個問題了：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="progress"> 
 
    <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> 
 
</div>

Answer 2

移動圖標的進步元素之外，它position:relative ..

<progress class="progress" value="10" max="100"></progress> 
<i class="fa fa-check-circle-o"></i> 

.fa { 
    position: relative; 
    z-index: 2; 
    top: -35px; 
    left: 50%; 
} 

http://www.codeply.com/go/gl3DnWcPKu