您如何为 HTML 符号（例如 x 和复选标记）着色？

Question

我想将 x 设为红色，将复选标记设为绿色，但不知道该怎么做，因为它是一个 dingbat HTML 代码。

      <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>

Answer 1

将它们包裹在一个跨度中，然后为跨度着色。使用 class 名称，例如 checkmark 和 x.

参见下面的代码片段：

.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>

Answer 2

只需将每个包裹在 <span> tag and give it a .check or .cross class. Then it's just a matter of adding the color 到每个类:

.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>

Answer 3

你可以把它放在一个 span 标签中并添加一个 class like

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

然后在 css 中设置颜色，如

.coloring {
  color:red;
}

查看示例：https://jsfiddle.net/axz16nqe/1/

您如何为 HTML 符号（例如 x 和复选标记）着色？

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

html

dingbats