Edit in JSFiddle

@font-face{
    font-family:FontAwesome;
    src:url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.eot?#iefix) format('eot'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.woff) format('woff'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.ttf) format('truetype'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.svg#FontAwesome) format('svg');
    font-weight:400;font-style:normal;}

[type="checkbox"] {
    display: none;
}
[type="checkbox"] ~ label::before {
    border: 1px solid silver;
    border-radius: 6px;
    box-shadow: inset 0 0 0.2em rgba( 32,32,32 ,0.5);
    content: "\a0 ";
    display: inline-block;
    font-family: FontAwesome;
    font-size: 150%;
    line-height: 0.75em;
    margin: 0 0.5em 0 0;
    overflow: visible;
    position: relative;
    text-indent: -0.1em;
    top: 0.05em;
    width: 0.75em;
}
[type="checkbox"]:checked ~ label::before {
    content: "\f00c";
    color: #4F4;
    text-shadow: 0.1em 0.1em 0 rgba( 32,32,32 ,0.75);
}
<form>
    <div class="formItem">
        <input type="checkbox" name="test123" id="test123" />
        <label for="test123">Testing</label>
    </div>
</form>