在表单中使用 Font Awesome [关闭]

【问题标题】：Using Font Awesome in a form [closed]在表单中使用 Font Awesome [关闭]
【发布时间】：2013-03-22 16:41:57
【问题描述】：

我正在尝试在我正在创建的表单中使用 Font Awesome。该表格基本上是一个多项选择测验，其中有一个问题，后面是带有单选按钮的可能正确答案。

我想在测验中加入 Font Awesome，而不是单选按钮。 (http://fortawesome.github.com/Font-Awesome/) 我想使用 font awesome 集合中的 icon-circle 和 icon-circle-blank，所以当用户点击答案时，JavaScript 会将图标更改为 "icon-circle" 而不是 "icon-circle" -空白的”。

是否有人对此有任何想法和/或最佳实践？

谢谢！

【问题讨论】：

标签： javascript html css font-awesome

【解决方案1】：

可以通过隐藏选项本身并使用标签显示更改的框来完成。这是我使用的 HTML：

<input type="radio" id="opt_yes" checked name="test" value="yes">
<label class="icon-" for="opt_yes"> Yes</label><br />
<input type="radio" id="opt_no" name="test" value="no">
<label class="icon-" for="opt_no"> No</label>

...这是我的 CSS（请注意，我在标签上使用了“icon-”类来为它们提供所有 Font Awesome 图标通用的支持样式）：

[type=radio] {
    display: none;
}
[type=radio] + label:before {
    content: "\f10c";
}
[type=radio]:checked + label:before {
    content: "\f111";
}

jsFiddle 演示 here.

（基于this question的解决方案）

【讨论】：