如何为HTML Dingbat符号（叉号、对勾）设置自定义颜色？

嘿，这个问题其实很好解决！那些Dingbat符号本质上就是普通的文本字符，所以我们完全可以用CSS给它们上色，和处理普通文字没区别。下面结合你的示例代码，给你几个靠谱的方案：

1. 快速应急：内联样式直接包裹 #

如果只是临时修改少量符号，直接用<span>把符号包起来，添加内联style属性就能快速实现：

<li><b>HD</b> Available <span style="color: red;">&#10006;</span></li>
<li><b>Commercial</b> Free <span style="color: red;">&#10006;</span></li>
<li><b>Unlimited</b> Movies/TV Shows <span style="color: green;">&#10004;</span></li>
<li><b>Cancel</b> Anytime <span style="color: green;">&#10004;</span></li>

2. 长期维护：CSS类批量处理 #

如果需要给大量符号统一上色，定义专门的CSS类会更高效，后续修改颜色只需要调整一处代码：

首先在样式表（或页面的<style>标签）里定义类：

.dingbat-cross {
    color: #ff3333; /* 红色，也可以用red、rgb(255,0,0)等格式 */
}
.dingbat-check {
    color: #2ecc71; /* 绿色，同理可换green、rgb(0,255,0) */
}

然后在HTML里给符号添加对应的类：

<li><b>HD</b> Available <span class="dingbat-cross">&#10006;</span></li>
<li><b>Commercial</b> Free <span class="dingbat-cross">&#10006;</span></li>
<li><b>Unlimited</b> Movies/TV Shows <span class="dingbat-check">&#10004;</span></li>
<li><b>Cancel</b> Anytime <span class="dingbat-check">&#10004;</span></li>

3. 结构更干净：伪元素分离样式与内容 #

如果不想在HTML里额外添加<span>标签，可以用CSS伪元素插入符号，同时完成上色，让HTML结构更简洁：

先编写CSS：

/* 用Unicode转义表示符号：\274C对应✖，\2714对应✔ */
li.unavailable::after {
    content: "\274C";
    color: red;
    margin-left: 5px; /* 可调整符号与文字的间距 */
}
li.available::after {
    content: "\2714";
    color: green;
    margin-left: 5px;
}

然后简化HTML结构：

<li class="unavailable"><b>HD</b> Available</li>
<li class="unavailable"><b>Commercial</b> Free</li>
<li class="available"><b>Unlimited</b> Movies/TV Shows</li>
<li class="available"><b>Cancel</b> Anytime</li>

本质上，这些Dingbat符号和普通字母、数字没有区别，只是Unicode编码对应了特殊图形，所以任何能控制文本颜色的CSS技巧都能适用，不用特殊处理符号本身~

内容的提问来源于stack exchange，提问作者Michie