Styled inputs with glyphs

gistfile1.css

// Works well on most current popular browsers. (Web fonts shakey on fringe browsers)
.styled-input {
    input[type=radio] {
        display: none;

        &:checked + label:before {
            @include icon($icon-radio-checked);
            color: #000;
        }

        & + label {
            display: block;
            position: relative;
            padding-left: 2em;
            cursor: pointer;

            &:before {
                @include icon($icon-radio-unchecked);
                margin-right: 10px;
                position: absolute;
                top: 2px;
                left: 5px;
                color: #666;
            }
        }
    }

    input[type=checkbox] {
        display: none;

        &:checked + label:before {
            @include icon($icon-checkbox-checked);
            color: #000;
        }

        & + label {
            display: block;
            position: relative;
            padding-left: 2em;
            cursor: pointer;

            &:before {
                @include icon($icon-checkbox-unchecked);
                margin-right: 10px;
                position: absolute;
                top: 2px;
                left: 5px;
                color: #666;

            }
        }
    }
}