Bootstrap 4 - Text/Symbol auf <progress> Element

Question

Ich versuche, ein Symbol auf einem Fortschrittsbalken im Bootstrap 4 Alpha zu überlagern.

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

Es aussehen sollte wie folgt aus (in etwa):

Stattdessen habe ich am Ende mit dem Follow-up:

Leider keine Kombination aus appearance:initial; und !important Tags machen den Trick.

Was fehlt mir, dass der Text innerhalb des Elements <progress> nicht angezeigt wird?

Answer 1

In der neuesten Version von Bootstrap 4, alpha-6, ist dieses Problem kein Problem mehr:

<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

das Symbol außerhalb des Fortschritts Element bewegen

und position:relative verwenden ..

<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