title: &hearts; and &diams; in the HTML show as black on Android even though the color is set as red in the CSS
body: <p>I am developing a card game in HTML, JS and CSS using the Meteor platform. I am using <code>&amp;hearts;</code> for the hearts suit and <code>&amp;diams;</code> for the dimonds suit. The color is set to red using <code>color: #FF0000;</code> in CSS. The font-family is set with <code>font-family: 'Times', serif;</code>. On a desktop PC, Mac or iPhone these show up as red icons, but on an Android using Chrome they show up as black. However, the rank is still displayed as red which leads me to believe this is specific to the icons themselves. </p>
  
  <p>Before displaying the suit string I run the code through the SafeString function in Spacebar.</p>
  
  <pre><code>suitString: function(suit) {
      var suits = {'H': '&amp;hearts;', 'S':'&amp;spades;', 'D':'&amp;diams;', 'C':'&amp;clubs;'}
  
      return Spacebars.SafeString(suits[suit]);
    }
  </code></pre>
  
  <p>I imagine it has something to do with the font that is used to render the icons on Android, but I have been unable to figure out exactly why this is happening. Or it could be something specific to the SafeString function.</p>
  
  <p>Can anyone enlighten me and is there a way to ensure the color on all devices without using images for the suits?</p>
  
  <p>Thanks!</p>