title: Bootstrap glyphicon: 100% width
body: <p>In my webapp I have a glyphicon contained in a div within a grid.</p>
  
  <p>I'd like like the glyphicon to be full width and proportional height (to be displayed correctly).</p>
  
  <p>How can I do ?</p>
  
  <p>Plunker is: <a href="http://plnkr.co/edit/9GL54M1ozwwpQgJXlCbc?p=preview" rel="nofollow">http://plnkr.co/edit/9GL54M1ozwwpQgJXlCbc?p=preview</a></p>
  
  <p>HTML is:</p>
  
  <pre><code>  &lt;body&gt;
      &lt;div class="container-fluid"&gt;
       &lt;div class="row"&gt;
         &lt;div class="col-xs-4 col-xs-offset-4" style="border: solid 2px red"&gt;
           &lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt;
         &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>CSS is:</p>
  
  <pre><code>.glyphicon {
    width: 100%;
    color: green;
    border: 3px solid green;
  }
  </code></pre>
  
  <p>Regards.</p>