Custom Checkbox and Radio Buttons with Icon Fonts

There are lots of tutorials on how you create your own custom radio buttons and checkboxes with pure CSS. But I haven't seen one that combines the :checked technique AND the use of icon fonts so I thought I should write a little something something on the subject. I'll assume that you already know how much more awesome an icon font is compared to an image or a sprite. A couple of reasons: they scale, they're Retina Ready and it just take a second to change their color or size. It's a long list, trust me!

Convinced? Good! Now the first thing you need to do is create your own custom font. Over at icomoon.io they have a really nice app for this. When you have generated your font, grab the font-face rule that came together with your icon font.

Then in your CSS file you set inputs to display:none, they're ugly as hell remember? Then we'll use the pseudo-element :before on our labels like so:

input[type='checkbox'] + label:before,
input[type='radio'] + label:before {
font-family: 'icomoon';
}

input[type="radio"] + label:before {
  content: "\e003"; /* Radio Button Unchecked */
}

input[type="radio"]:checked + label:before {
  content: "\e002"; /* Radio Button Checked */
}

input[type="checkbox"] + label:before {
  content: "\e000"; /* Checkbox Unchecked */
}

input[type="checkbox"]:checked + label:before {
  content: "\e001"; /* Checkbox Checked */
}

Then in the mark-up you write standard html, no rabbit-in-a-hat-tricks!

And there you go! Check out a demo here. This works from IE8 and up, if you need deeper browser support I'd check out Selectivizr. Thank you for reading, hope I helped!