title: change bootstrap colors glyphicons
body: <p>I'm using the glyphicons from twitter bootstrap 3. Although I've been able to get the icon to work and display as I desire them to, I having one issue that I can't solve. When I click on glyphicon (the thumbs up icon for ex,) I want the icon to change to the color red. For some reason, I can't get the icon color to change in jQuery. I can get the background-color to change so I know my jQuery is working, but not the color of the icon itself. So my questions simply put : How can I change the bootstrap icons colors on click?</p>
  
  <p>Here is the example I'm working on.</p>
  
  <p>bootstrap css for this item. this is the only place I can control color</p>
  
  <pre><code>.glyphicon-thumbs-up:before{
      content:"\e125"; 
      color: #7f8c8d; 
      opacity: 0.7;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;a id='liked' href='#' &lt;span class='glyphicon glyphicon-thumbs-up'&gt;&lt;/span&gt; &lt;/a&gt;"
  </code></pre>
  
  <p>I tried using the .css function to work. It works for changing the background-color, but not the color of the icon. I still have to go into the css for that.</p>
  
  <p>jQuery / JavaScript</p>
  
  <pre><code>$(".glyphicon").click(function() {
  
      var socialButton = $(this).attr('id'); // for later
  
  
      $(this).css("background-color", "red"); //this works
      $(this).css("color", "red"); //this doesn't
  
  })
  </code></pre>
  
  <p>Since it works only from css, I tried to use the toggleClass function</p>
  
  <pre><code>$(".glyphicon").click(function() {
  
      var socialButton = $(this).attr('id');
  
  
      $(this).toggleClass('likedClicked'); // this doesn't
  
  })
  </code></pre>
  
  <p>and I placed this inside of my css to control it</p>
  
  <pre><code>.likedClicked {
      content:"\e125"; 
      color: red; 
      opacity: 0.7;
      /*z-index: 10000; Tried changing the z-index on a hunch. didn't work*/
  }
  </code></pre>