CODEWITHSUNDEEP
htmldingbats
Michie
Michie

Reputation: 45

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>

Upvotes: 2

Views: 7063

Answers (3)

Cory Kleiser
Cory Kleiser

Reputation: 2024

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>

Upvotes: 1

shifu
shifu

Reputation: 670

You could put it in a span tag and add a class like

  <li><b>HD</b> Available <span class="coloring">&#10006</span></li>
  <li><b>Commercial</b> Free <span class="coloring">&#10006</span></li>

then set color in css like 

.coloring {
  color:red;
}

See sample: https://jsfiddle.net/axz16nqe/1/

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42364

Simply wrap each in a <span> tag and give it a .check or .cross class. Then it's just a matter of adding the color to each of the classes:

.cross {
  color: #ff0000;
}

.check {
  color: #00ff00;
}
<li><b>HD</b> Available <span class="cross">&#10006</span></li>
<li><b>Commercial</b> Free <span class="cross">&#10006</span></li>
<li><b>Unlimited</b> Movies/TV Shows <span class="check">&#10004</span></li>
<li><b>Cancel</b> Anytime <span class="check">&#10004</span></li>

Upvotes: 2

Related Questions