Question

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

我想在测验中加入Font Awesome而不是单选按钮。（http://fortawesome.github.com/Font-Awesome/）我想使用字体真棒集合中的图标圆圈和图标圆圈空白，这样当用户点击答案时，JavaScript会将图标更改为“图标 - 圆圈”而不是“图标” -circle空白”。

有没有人对此有何想法和/或最佳做法？

谢谢！

Answer 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 demo here。

（基于this question的解决方案）

在表单中使用Font Awesome

1 个答案: