2

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>
Michie
  • 45
  • 1
  • 5

3 Answers3

2

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>
Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
1

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>
Cory Kleiser
  • 1,969
  • 2
  • 13
  • 26
1

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/

shifu
  • 672
  • 8
  • 37