如何在CSS中使用自定义图标自定义的复选框的标签中添加悬挂缩进？

Question

我正在尝试使用font-awesome自定义复选框的外观,并使标签的所有文本正确缩进.我已经自定义了复选框的外观,这使得通常的方法缩进文本不起作用,因为我隐藏了实际的复选框(请参阅下面的CSS).

目前,我想获得以下(左),而我想要右边的那个:

我使用了以下代码(参见JSFiddle):

CSS

受这个简单的CSS复选框的启发,我使用以下命令格式化我的复选框font-awesome:

input[type=checkbox] { 
    display:none;
} 

input[type=checkbox] + label:before {
    font-family: FontAwesome;
    display: inline-block;
    content: "\f096";
    letter-spacing: 10px;
    cursor: pointer;
}

input[type=checkbox]:checked + label:before { 
    content: "\f046";
} 

input[type=checkbox]:checked + label:before { 
    letter-spacing: 8px;
} 

HTML

<input type="checkbox" id="box1" checked="">
<label for="box1">Item 1: some long text...</label>
<br>
<input type="checkbox" id="box2" checked="">
<label for="box2">Item 2: some long text...</label>
<br>
<input type="checkbox" id="box3">
<label for="box3">Item 3: some long text...</label>

我试图修改margin-left和text-indent的属性label和label:before选择,但没有成功.

知道如何在使用漂亮的字体 - 真棒图标时获得正确的缩进吗？

非常感谢您的帮助!

Answer 1

添加此样式(在Chrome和Firefox上均已测试)

label {
    display: block;
    padding-left: 1.5em;
    text-indent: -.7em;
}

http://jsfiddle.net/tkt4zsmc/2/

最后结果: