Font Awesome für Check-Boxen und Radio-Buttons verwenden.
BLOG
Schicke Check-Boxen und Radio-Buttons mit Font Awesome und CSS ohne Javascript.
Gerade bei Hochauflösenden Displays sind Icon Fonts sehr nützlich. Sie sehen immer gestochen scharf aus und sind im Vergleich zu Grafiken kleiner in der Dateigröße – was sich bei den Seitenaufrufen bemerkbar macht. Wenn man nun schon Icon Fonts wie Font Awesome einsetzt und diese Elemente für Radio-Buttons und Check-Boxen enthalten kann man diese ganze leicht mittels CSS einsetzen.
Was dann z.B. so aussehen kann:
Siehe dazu folgenden CSS Snippet.
input[type="checkbox"] {
width: auto;
margin: 0;
opacity: 0;
position: absolute;
z-index: 5;
}
input[type="checkbox"] + label {
cursor: pointer;
display: inline;
margin-left: 23px;
}
input[type="checkbox"] + label:before {
content: "\f096";
cursor: pointer;
font: 17px/1em FontAwesome;
margin-left: -23px;
padding-right: 4px;
vertical-align: top;
}
input[type="checkbox"]:checked + label:before {
content: "\f046";
}