title: Bootstrap 4 – Text/Icon on <progress> element
body: <p>I am trying to overlay an icon on a progress bar in the Bootstrap 4 alpha.</p>
  
  <pre><code>&lt;progress class="progress progress-primary" value="100" max="100"&gt;
    &lt;i class="fa fa-check-circle-o"&gt;&lt;/i&gt;
  &lt;/progress&gt;
  </code></pre>
  
  <p>It should look like the following (roughly):</p>
  
  <p><a href="https://i.stack.imgur.com/t3wmi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t3wmi.png" alt="Desired Result"></a></p>
  
  <p>Instead, I end up with the following:</p>
  
  <p><a href="https://i.stack.imgur.com/nRTgk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nRTgk.png" alt="Actual Result"></a></p>
  
  <p>Unfortunately, no combination of <code>appearance:initial;</code> and <code>!important</code> tags are doing the trick.</p>
  
  <p>What am I missing that is causing the text within the <code>&lt;progress&gt;</code> element to not show?</p>