Use Font Awesome Icons for Your Website Checkboxes & Radio Buttons

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. I applied the same CSS, with some Font Awesome tweaks, and was able to do the same thing. Here are the results:

Update 23 Feb 2019: As noted in the other post, the best way to do this is by adding it to the label. This may not work with some plugins, who structure the label and input in a way that can’t be easily styled. It does contain special selectors for the WooCommerce terms checkbox.

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 input field.

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. I put this in the Divi theme‘s custom CSS under Divi > Theme Options > Custom CSS, but you can put it in your theme’s custom CSS field or in the Customizer under “Additional CSS”:

/** SECTION 1 **/

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

/* Set Font Awesome font, size, & positioning for the checkboxes/radio buttons plus the cursor on hover */
input[type=checkbox] + label:before,
input[type=checkbox] + span.woocommerce-terms-and-conditions-checkbox-text:before,
input[type=radio] + label:before {
  visibility: visible;  
  font-family: "FontAwesome"!important;
  font-size: 25px;
  position: relative;
  top: 5px;
  padding-right: 8px;
}

input[type=checkbox] + label:hover,
input[type=checkbox] + span.woocommerce-terms-and-conditions-checkbox-text:hover,
input[type=radio] + label:hover { 
  cursor: pointer; 
}

/** SECTION 2 **/

/** SECTION 1 **/

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

/* Set Font Awesome font, size, & positioning for the checkboxes/radio buttons plus the cursor on hover */
input[type=checkbox] + label:before,
input[type=checkbox] + span:before,
input[type=radio] + label:before {
  visibility: visible;  
  font-family: "FontAwesome"!important;
  font-size: 25px;
  position: relative;
  top: 5px;
  padding-right: 8px;
}

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

/** SECTION 2 **/

/* Set checkbox to FA icons: normal, hover, checked, & checked hover */
input[type=checkbox] + label:before,
input[type=checkbox] + span:before { 
  content: '\f096'!important;
}
input[type=checkbox] + label:hover:before,
input[type=checkbox] + span:before {
  content: '\f046';
  filter: alpha(opacity=20); 
  opacity: 0.2;
}
input[type=checkbox]:checked + label:before,
input[type=checkbox]:checked + span:before {
  content: '\f046'!important;
}
input[type=checkbox]:checked + label:hover:before,
input[type=checkbox]:checked + span:hover:before, input[type=checkbox]:checked + label:before,
input[type=checkbox]:checked + span:before { 
  filter: alpha(opacity=100); opacity: 1; 
}

/* Set radio buttons FA icons: normal, hover, checked, & checked hover */
input[type=radio] + label:before { 
  content: '\f10c'!important;
}
input[type=radio] + label:hover:before { 
  content: '\f192'!important; 
  filter: alpha(opacity=20); 
  opacity: 0.2; 
}
input[type=radio]:checked + label:before { 
  content: '\f192'!important; 
}
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) at the bottom. 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.