I have modified the look of checkboxes to make them more cute, but I want to put a content: "\ 2713"; if they are active and I can not get it.
Here is an example of what I have.
/*chechboxes*/
.checkbox.ChachiCheck { padding-left: 0; }
.checkbox.ChachiCheck label, .checkbox-inline.ChachiCheck { display: inline-block; position: relative; padding-left: 0; }
.checkbox.ChachiCheck label input, .checkbox-inline.ChachiCheck input { display: none; }
.checkbox.ChachiCheck label span, .checkbox-inline.ChachiCheck span { width: 35px; border-radius: 20px; height: 18px; border: 1px solid #dbdbdb; background-color: rgb(255, 255, 255); border-color: rgb(223, 223, 223); box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset; transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s; display: inline-block; vertical-align: middle; margin-left: 10px; }
.checkbox.ChachiCheck label span:before, .checkbox-inline.ChachiCheck span:before {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: rgb(255,255,255);
content: " ";
top: 0;
position: relative;
left: 0;
transition: all 0.3s ease;
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.checkbox.ChachiCheck label > input:checked + span:before, .checkbox-inline.ChachiCheck > input:checked + span:before { left: 17px; }
/* Switch Default */
.checkbox.ChachiCheck label > input:checked + span, .checkbox-inline.ChachiCheck > input:checked + span {
background-color: #6caee0;
border-color: #6caee0;
box-shadow: #6caee0 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.ChachiCheck label:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f00c";
position: absolute;
top: 5px;
left: 9px;
color: #000;
font-size: 12px;
line-height: 1;
margin: 1px 0 0 5px;color: #fff
}
.checkbox.ChachiCheck label > input:checked:disabled + span, .checkbox-inline.ChachiCheck > input:checked:disabled + span {
background-color: rgb(220, 220, 220);
border-color: rgb(220, 220, 220);
box-shadow: rgb(220, 220, 220) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.ChachiCheck label > input:disabled + span, .checkbox-inline.ChachiCheck > input:disabled + span {
background-color: rgb(232,235,238);
border-color: rgb(255,255,255);
}
.checkbox.ChachiCheck label > input:disabled + span:before, .checkbox-inline.ChachiCheck > input:disabled + span:before {
background-color: rgb(248,249,250);
border-color: rgb(243, 243, 243);
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
<div class="checkbox ChachiCheck"><label><input type="checkbox" name="cli_recEq" id="cli_recEq" value="1" title="Aplicar Recargo equivalencia" /><span></span></label></div>The idea is to do this:
It's the same one that duckduckgo.com uses and I've been trying to see how they've done it but I do not know where I need to apply it.
On the other hand I see that they use a font called ddg-serp-icons and I use Fontawesome so I'll have to change the content to "f00c" and add the font "Font Awesome 5 Free" but I think that I'll know how to do it.