I am trying to customize the look of my checkboxes using font-awesome and to have all the text of the labels correctly indented. I have customized the look of the checkboxes which makes the usual approaches to indent the text not working as I am hiding the actual checkbox (see the CSS below).
Currently, I obtain the following (left) while I would like the one on the right:
I used the following code (see the JSFiddle):
CSS
Inspired by this simple CSS checkboxes, I use the following to format my checkboxes with 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>
I have tried to modify the margin-left
and text-indent
attributes of the label
and label:before
selectors but without any success.
Any idea how I could have the correct indent while using the nice font-awesome icons?
Thank you very much for your help!
Method 1: By making the position of checkbox relative, set the vertical-align to the middle can align the checkboxes and their labels. Here, we have made the position of the checkbox relative to the label. So the checkboxes are aligned according to the label.
Click the HTML/CSS Editor link. Copy and paste the below CSS code in the field on the Custom CSS tab. Then, simply replace the hex color code #F06586 with whichever color you want. Under Layout > Layout Options tab, make sure the option to Use Default Browser Icons for Radio Buttons and Checkboxes is unchecked.
Add this style (tested both on Chrome and Firefox)
label {
display: block;
padding-left: 1.5em;
text-indent: -.7em;
}
http://jsfiddle.net/tkt4zsmc/2/
Final result:
Based on the answer by Fabrizio Calderan, I used the following modifications to the CSS:
label{
display: inline-block;
margin-left: 20px;
}
label:before{
margin-left: -23px;
}
The advantage is that it does not modify the spacing between the items. You can see the final results in JSFiddle.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With