Làm cách nào để thêm thụt lề treo vào nhãn của hộp kiểm được tùy chỉnh với các biểu tượng tùy chỉnh trong CSS?

Question

Tôi đang cố gắng tùy chỉnh giao diện của các hộp kiểm của mình bằng phông chữ tuyệt vời và để tất cả văn bản của các nhãn được thụt lề một cách chính xác. Tôi đã tùy chỉnh giao diện của các hộp kiểm mà làm cho các phương pháp thông thường để thụt lề văn bản không hoạt động như tôi đang ẩn hộp kiểm thực tế (xem CSS bên dưới).

Hiện nay, tôi có được như sau (bên trái) trong khi tôi muốn một ở bên phải:

tôi đã sử dụng đoạn mã sau (xem JSFiddle):

CSS

Lấy cảm hứng từ điều này simple CSS checkboxes, tôi sử dụng phần sau để định dạng hộp kiểm của mình thứ font-tuyệt vời:

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> 

Tôi đã cố gắng để thay đổi margin-left và text-indent thuộc tính của label và label:before selectors nhưng không có bất kỳ thành công.

Bất kỳ ý tưởng nào về cách tôi có thể có thụt lề chính xác trong khi sử dụng các biểu tượng chữ đẹp tuyệt vời?

Cảm ơn bạn rất nhiều vì đã giúp đỡ!

Answer 1

Thêm phong cách này (thử nghiệm cả trên Chrome và Firefox)

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

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

---

kết quả cuối cùng:

Answer 2

Dựa trên câu trả lời của Fabrizio Calderan, Tôi đã sử dụng các sửa đổi sau đối với CSS:

label{ 
    display: inline-block; 
    margin-left: 20px; 
} 

label:before{ 
    margin-left: -23px; 
} 

Lợi thế là nó không sửa đổi khoảng cách giữa các mục. Bạn có thể xem kết quả cuối cùng trong JSFiddle.

Answer 3

Sau khi thử đề xuất của fcalderan và không thể nhận được các giá trị cho padding-left và text-indent phù hợp với các trình duyệt khác nhau, tôi đã chuyển sang hộp flex. Nó là khá green ngày nay.

Nếu bạn đặt các cặp input/label trong div s vì được khuyến nghị bởi Mozilla, bạn có thể tạo kiểu cho chúng theo cách này.

fieldset { 
 
    width: 13ch; 
 
} 
 

 
fieldset > div { 
 
    display: flex; 
 
} 
 

 
fieldset > div > * { 
 
    align-self: baseline; 
 
} 
 

 
fieldset > div > input[type=checkbox] { 
 
    margin: 0 0.5ch 0 0; 
 
    width: 1em; 
 
    height: 1em; 
 
}

<fieldset> 
 
    <legend>Sichtbarkeit</legend> 
 
    <div> 
 
    <input id="c1" checked="" type="checkbox"> 
 
    <label for="c1">Minuten</label> 
 
    </div> 
 
    <div> 
 
    <input id="c2" checked="" type="checkbox"> 
 
    <label for="c2">Nur Minuten, die Vielfache von 5 sind</label> 
 
    </div> 
 
    <div> 
 
    <input id="c3" checked="" type="checkbox"> 
 
    <label for="c3">Stunden</label> 
 
    </div> 
 
    <div> 
 
    <input id="c4" checked="" type="checkbox"> 
 
    <label for="c4">Nur 12 Stunden</label> 
 
    </div> 
 
</fieldset>