Использование шрифта Awesome в форме

Question

Я пытаюсь использовать шрифт Awesome в форме, которую я создаю. Форма - это, в основном, викторина с несколькими вариантами выбора, на которой будет задан правильный ответ с помощью переключателей.

Я хочу включить шрифт Awesome вместо переключателей в викторине. (http://fortawesome.github.com/Font-Awesome/) Я хочу использовать значок-круг и значок-круг-пробел из шрифтовой удивительной коллекции, поэтому, когда пользователь нажимает на ответ, JavaScript изменит значок на «значок-круг» вместо «icon-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-» класс на моих лейблов, чтобы дать им поддерживающие стили, общие для всех Потрясающие иконки шрифтов):

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

jsFiddle demo here.

(на основе this question)