Пользовательский флажок с использованием шрифта awesome и css

Question

Я делаю пользовательский флажок с шрифтом awesome и css.

По щелчку/когда установлен флажок, я пытаюсь создать некоторые отступы вокруг черной проверил коробку вместо (с меньшим черным ящиком в белой коробке при проверке/щелкнул)

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); 
 

 
/*** basic styles ***/ 
 

 
/*** custom checkboxes ***/ 
 

 
input[type=checkbox] { 
 
    display: none; 
 
} 
 
/* to hide the checkbox itself */ 
 

 
input[type=checkbox] + label:before { 
 
    font-family: FontAwesome; 
 
} 
 
input[type=checkbox] + label:before { 
 
    content: "\f096"; 
 
} 
 
/* unchecked icon */ 
 

 
/*input[type=checkbox] + label:before { letter-spacing: 10px; }*/ 
 

 
/* space between checkbox and label */ 
 

 
input[type=checkbox]:checked + label:before { 
 
    content: "\f0c8"; 
 
} 
 
/* checked icon */ 
 

 
input[type=checkbox]:checked + label:before { 
 
    letter-spacing: 5px; 
 
} 
 
/* allow space for check mark */

<div> 
 
    <input id="box1" type="checkbox" /> 
 
    <label for="box1"></label> 
 
    <br> 
 
    <input id="box2" type="checkbox" /> 
 
    <label for="box2"></label> 
 
    <br> 
 
    <input id="box3" type="checkbox" /> 
 
    <label for="box3"></label> 
 
</div>

Answer 1

Вы используете один символ, так что вы не можете добавить письмо-интервал.

Я бы предложил что-то подобное.

Уменьшите размер значка замены/персонажа, добавьте отступы и границу. В качестве альтернативы, найдите подходящую иконку/символ, который появляется, как вы хотите, и используйте это.

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); 
 

 
/*** basic styles ***/ 
 

 
/*** custom checkboxes ***/ 
 

 
input[type=checkbox] { 
 
    display: none; 
 
} 
 
/* to hide the checkbox itself */ 
 

 
input[type=checkbox] + label:before { 
 
    font-family: FontAwesome; 
 
} 
 
input[type=checkbox] + label:before { 
 
    content: "\f096"; 
 
} 
 
/* unchecked icon */ 
 

 
/*input[type=checkbox] + label:before { letter-spacing: 10px; }*/ 
 

 
/* space between checkbox and label */ 
 

 
input[type=checkbox]:checked + label:before { 
 
    content: "\f0c8"; 
 
    display: inline-block; 
 
} 
 
/* checked icon */ 
 

 
input[type=checkbox]:checked + label:before { 
 
    font-size: 60%; 
 
    border: 1px solid black; 
 
    vertical-align: top; 
 
    padding: 2px; 
 
    border-radius: 2px; 
 
} 
 
/* allow space for check mark */

<div> 
 
    <input id="box1" type="checkbox" /> 
 
    <label for="box1"></label> 
 
    <br> 
 
    <input id="box2" type="checkbox" /> 
 
    <label for="box2"></label> 
 
    <br> 
 
    <input id="box3" type="checkbox" /> 
 
    <label for="box3"></label> 
 
</div>

Answer 2

Нравится?

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); 
 

 
/*** basic styles ***/ 
 

 
/*** custom checkboxes ***/ 
 

 
input[type=checkbox] { 
 
    display: none; 
 
} 
 
/* to hide the checkbox itself */ 
 

 
input[type=checkbox] + label:before { 
 
    font-family: FontAwesome; 
 
} 
 
input[type=checkbox] + label:before { 
 
    content: "\f096"; 
 
} 
 
/* unchecked icon */ 
 

 
/*input[type=checkbox] + label:before { letter-spacing: 10px; }*/ 
 

 
/* space between checkbox and label */ 
 

 
input[type=checkbox]:checked + label:before { 
 
    content: "\f0c8"; 
 
    font-size:12px; 
 
    margin-left:1px; 
 
} 
 
/* checked icon */ 
 

 
input[type=checkbox]:checked + label:before { 
 
    letter-spacing: 5px; 
 
} 
 
/* allow space for check mark */

<div> 
 
    <input id="box1" type="checkbox" /> 
 
    <label for="box1"></label> 
 
    <br> 
 
    <input id="box2" type="checkbox" /> 
 
    <label for="box2"></label> 
 
    <br> 
 
    <input id="box3" type="checkbox" /> 
 
    <label for="box3"></label> 
 
</div>