0

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

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

有没有人对如何做到这一点有任何想法和/或最佳实践？

谢谢！

4

1 回答 1

12

可以通过隐藏选项本身并使用标签显示更改的框来完成。这是我使用的 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 演示在这里。

（基于这个问题的解决方案）

于 2013-04-01T17:07:18.030 回答