I previously posted a guide on how to use the Divi theme’s icon font for making boring checkboxes and radio buttons look much cooler and more “Divi-like.” Almost immediately I had people asking how they could do the same thing with Font Awesome’s font icon. Sorry it’s taken so long, but I finally worked on it and got a version that works to make awesome looking Font Awesome checkboxes and radio buttons. Here are the results:

Font awesome checkboxes radio buttons

Styling Radio Buttons & Checkboxes in Forms

Do you agree these look way nicer than the default Windows or Mac checkboxes? Here’s the problem: you can not style radio buttons and checkboxes! They are set by the operating system and don’t respond to CSS. So here’s the trick: you hide the ones created by the OS, and replace with your own. So you’ll see in the CSS below that I first hide them, then use the :before pseudo element to insert the Font Awesome icons before the field’s label.

Loading Font Awesome

In order to use Font Awesome icons, you need to load the font on your site. If you’re already using a plugin, theme, or custom code that does this for you, then you can proceed with the CSS and skip this part. For everyone else, you need to add Font Awesome. You can add the code directly to your theme or if your theme has a place to load scripts. I used the plugin Better Font Awesome. It’s claim to fame is that it always loads the latest version of FA. However, it’s not been updated to support Font Awesome 5. There’s a beta version for that, but it’s pretty buggy as of my writing this. So the CSS below isn’t verified to work with FA 5. I’ll update it once this plugin supports it, or I have another easy way to test. All you need to do is install and activate Better Font Awesome. That should load FA 4.7 on your site and allow the CSS below to work.

The Magic CSS

Here’s the CSS I wrote to do that, with comments to help if you need to modify:

/* hide the OS/browser checkboxes/radio buttons */
input[type=checkbox], input[type=radio] {
  visibility: hidden;
  margin: 0;
  width: 0!important;
}

input[type=checkbox] + label:hover, input[type=radio] + label:hover { 
  cursor: pointer; 
}

/* set FontAwesome and positioning */
input[type=checkbox] + label:before, input[type=radio] + label:before {
  font-family: "FontAwesome";
  font-size: 20px;
  position: relative;
  margin-right: 0.7em;
}

/* Gravity Forms tweaks - change for your forms plugin */
.gform_wrapper li.gf_list_inline ul.gfield_checkbox li,
.gform_wrapper li.gf_list_inline ul.gfield_radio li {
  display: -moz-inline;
  display: inline;
}

/* set checkbox icons and opacities for normal, hover, and checked */
input[type=checkbox] + label:before { content: "\f096"; }
input[type=checkbox] + label:hover:before { content: "\f046"; filter: alpha(opacity=30); opacity: 0.3; }
input[type=checkbox]:checked + label:before { content: "\f046"; }
input[type=checkbox]:checked + label:hover:before, input[type=radio]:checked + label:hover:before { filter: alpha(opacity=100); opacity: 1; }

/* set radio button icons and opacities for normal, hover, and checked */
input[type=radio] + label:before { content: "\f10c"; }
input[type=radio] + label:hover:before { content: "\f192"; filter: alpha(opacity=30); opacity: 0.3; }
input[type=radio]:checked + label:before { content: "\f192"; }
input[type=radio]:checked + label:hover:before { filter: alpha(opacity=100); opacity: 1; }

This should impact all the checkboxes and radio buttons on your site including forms plugins, comment opt-in boxes, etc. I did include a little CSS for Gravity Forms (since that’s what I use). You may need to customize that part to work with your forms plugin, but it should work with WP Forms, Caldera Forms, Ninja Forms, etc.

Do You Need Help With This?

Is this too technical? Or maybe you’re just too busy? Sign up for one of our WordPress management plans, and we’ll do all this for you as part of the included design tweaks.

Tevya

Hi, I'm Tevya! I wrote this. I am the owner of WordXpress and also created Starfish Plugins. I love helping small businesses and WordPress professionals. My wife Jill, helps with the business and is the amazing CEO of our family (3.5 kids). When I'm not working, I like to play basketball, go boating, shoot targets, swim, serve in my church, play Ultimate, and have outdoor adventures as a family.