Casey Casey - 6 months ago 15
CSS Question

Fill in color of UTF-8 star

How can I use CSS to fill in the background color of a UTF-8 star (☆)? I tried using this, but it only changes the border color:



.rating {
color: #f70;
}

<p class="rating">&#9734;&#9734;&#9734;&#9734;</p>




Answer

You probably want to use a solid star, like http://www.fileformat.info/info/unicode/char/2605/index.htm

Here's an example: http://codepen.io/PaulBGD/pen/reXWvX

 #star {
   font-size: 128px;
   color: yellow;
   /* Some sort of border */
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
 }
 <span id="star">&#9733;</span>

Comments