Bootstrap 4 – Text/Icon 在 <progress> 元素上

Question

我正在尝试在 Bootstrap 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

将图标移到进度元素之外并使用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

Answer 2

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

Bootstrap 4 – Text/Icon 在 <progress> 元素上

Bootstrap 4 – Text/Icon on <progress> element

css

twitter-bootstrap

twitter-bootstrap-4