title: How do I target the style of an icon in CSS?
body: <p>I have the following code:</p>
  
  <pre><code>&lt;span class="stars"&gt;★★☆☆☆   &lt;/span&gt;
  </code></pre>
  
  <p>I want to target the empty stars to take on a different color. However, I do not know how to target this.</p>
  
  <p>This doesn't do anything:</p>
  
  <pre><code>.glyphicon-glyphicon-star-empty{
      color: gray !important;
  }
  </code></pre>
  
  <p>And this changes the color of all stars. Not the empty ones.</p>
  
  <pre><code>.entry-content span .stars{
      color:gray;
  }
  </code></pre>
  
  <p>How can I change the border color to only the empty stars (the last 3)?
  I would like to only use CSS, but if JQuery or JavaScript is necessary, then I'm all ears. (FYI this won't be the only class.) I want to target ALL stars when they are empty.</p>