Font Awesome für Check-Boxen und Radio-Buttons verwenden.

BLOG

Schicke Check-Boxen und Radio-Buttons mit Font Awesome und CSS ohne Javascript.

font awsome

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:

Check-Boxen und Radio-Buttons mit Font Awesome

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"; }