アイコンフォント（fontawesome）を使ったきれいなチェックボックスです。アイコンフォントなので、サイズや色を自由に変えることができます（ただし、後ろに続くフォントとの位置調整が必要です）。

本来のチェックボックスを display: none; で消し、チェックボックス用のlabelにアイコンフォントを指定して、チェックボックスのオンオフでアイコンを切り替えています。

HTMLソース

  <li>
    <input type="checkbox" name="one" id="one" />
    <label for="one">Create checkbox</label>
  </li>

CSSソース

    label:before {
	    content: '\f096'; /*unchecked*/
        }
    label:after {
	    content: '\f046'; /*checked*/
	    max-width: 0;
	    overflow: hidden;
	    opacity: 0.5;
	    transition: all 0.35s;
        }

アイコンフォントを使ったチェックボックス

• Create checkbox
• Assign label
• Import iconfont
• Iconify label pseudo elements
• Animate icon widths
• Color the icons