Bootstrap 4 - Text/Icon на <progress> элемент

Question

Я пытаюсь наложить значок на индикатор выполнения в бутстрап 4 alpha.

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

Он должен выглядеть следующим образом (примерно):

Вместо этого, я в конечном итоге следующее:

К сожалению, ни сочетание appearance:initial; и !important теги делают трюк.

Что мне не хватает, что вызывает текст в пределах элемента <progress>, который не отображается?

Answer 1

В последней версии Bootstrap 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