Search code examples
htmldingbats

How do you color HTML symbols like x's and checkmarks?

I would like to make the x's red and the checkmarks green, but confused how to since it's a dingbat HTML code. 

      <li><b>HD</b> Available &#10006</li>
      <li><b>Commercial</b> Free &#10006</li>
      <li><b>Unlimited</b> Movies/TV Shows &#10004</li>
      <li><b>Cancel</b> Anytime &#10004</li>

Solution

  • Wrap them in a span and then color the span. Use a class name like checkmark and x.

    See code snippet below:

    .x{
  color:red;
}

.checkmark{
  color:green;
}
    <ul>
  <li><b>HD</b> Available <span class="x">&#10006</span></li>
  <li><b>Commercial</b> Free <span class="x">&#10006</span></li>
  <li><b>Unlimited</b> Movies/TV Shows <span class="checkmark">&#10004</span></li>
  <li><b>Cancel</b> Anytime <span class="checkmark">&#10004</span></li>
</ul>