在窗体中使用字体真棒

我想在我创建的窗体中使用字体真棒。这个表格基本上是一个多选题测验，它会有一个问题，然后是单选按钮可能的正确答案。在窗体中使用字体真棒

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

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

谢谢！

来源

2013-04-01 osbt

可以通过隐藏选项本身并使用标签来显示更改的框来完成。下面是我使用的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-”类给他们共同的支持样式的所有字体真棒图标）：

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

jsFiddle demo here。（根据this question的解决方案）

来源

2013-04-01 17:07:18 metadept

在窗体中使用字体真棒

回答

相关问题