title: WooCommerce star ratings shows strange symbols
body: <p>I have very strange problem with woocommerce product ratings. Just go and check this product:</p>
  
  <p><a href="http://produkti.revita.bg/shop/arnold-iron-pack-20-dozi/" rel="nofollow">http://produkti.revita.bg/shop/arnold-iron-pack-20-dozi/</a></p>
  
  <p>and see the last tab which is for the reviews. Instead of showing stars for rating it shows some strange things. I have gone through the CSS and check some php files, but I'm really stuck at this. </p>
  
  <p>I think it's a CSS problem because actually the ratings are there but the stars are not showing. </p>
  
  <pre><code>.woocommerce p.stars a.star-1,.woocommerce-page p.stars a.star-1 {width: 2em}
  
  .woocommerce p.stars a.star-1:after,.woocommerce-page p.stars a.star-1:after {content: "e021"}
  
  .woocommerce p.stars a.star-1.active:after,.woocommerce p.stars a.star-1:hover:after,.woocommerce-page p.stars a.star-1.active:after,.woocommerce-page p.stars a.star-1:hover:after {content: "e020"}
  
  .woocommerce p.stars a.star-2,.woocommerce-page p.stars a.star-2 {width: 3em}
  
  .woocommerce p.stars a.star-2:after,.woocommerce-page p.stars a.star-2:after {content: "e021e021"}
  
  .woocommerce p.stars a.star-2.active:after,.woocommerce p.stars a.star-2:hover:after,.woocommerce-page p.stars a.star-2.active:after,.woocommerce-page p.stars a.star-2:hover:after {content: "e020e020"}
  
  .woocommerce p.stars a.star-3,.woocommerce-page p.stars a.star-3 {width: 4em}
  
  .woocommerce p.stars a.star-3:after,.woocommerce-page p.stars a.star-3:after {content: "e021e021e021"}
  
  .woocommerce p.stars a.star-3.active:after,.woocommerce p.stars a.star-3:hover:after,.woocommerce-page p.stars a.star-3.active:after,.woocommerce-page p.stars a.star-3:hover:after {content: "e020e020e020"}
  
  .woocommerce p.stars a.star-4,.woocommerce-page p.stars a.star-4 {width: 5em}
  
  .woocommerce p.stars a.star-4:after,.woocommerce-page p.stars a.star-4:after {content: "e021e021e021e021"}
  
  .woocommerce p.stars a.star-4.active:after,.woocommerce p.stars a.star-4:hover:after,.woocommerce-page p.stars a.star-4.active:after,.woocommerce-page p.stars a.star-4:hover:after {content: "e020e020e020e020"}
  
  .woocommerce p.stars a.star-5,.woocommerce-page p.stars a.star-5 {width: 6em;border:0}
  
  .woocommerce p.stars a.star-5:after,.woocommerce-page p.stars a.star-5:after {content: "e021e021e021e021e021"}
  
  .woocommerce p.stars a.star-5.active:after,.woocommerce p.stars a.star-5:hover:after,.woocommerce-page p.stars a.star-5.active:after,.woocommerce-page p.stars a.star-5:hover:after {content: "e020e020e020e020e020"}
  </code></pre>
  
  <p>This is the code I found in woocommerce.css for this stars rating. I have downloaded again the woocommerce plugin and compared this css block with the original one but they seem identical. The comments are allowed on the products because I have read that this might cause problems. I have also checked the woocommerce setting and from there the needed checkboxes for the ratings are checked. </p>