在窗體中使用字體真棒

我想在我創建的窗體中使用字體真棒。這個表格基本上是一個多選題測驗，它會有一個問題，然後是單選按鈕可能的正確答案。在窗體中使用字體真棒

我想在測驗中加入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

在窗體中使用字體真棒

回答

相關問題