Use a Custom Icon for the Radio Button

What does this code do?

This code snippet will allow you to change the circle radio button to an icon of your choice.

Video Tutorial

Code Snippets

This code snippet uses Font Awesome for the icons. To use Font Awesome, you will need to copy and paste your own personal Font Awesome Kit Code into Settings > Advanced > Code Injection > Header. You only need this script once per site, so if you are already using Font Awesome Icons on this site, you can skip to the next code snippet.

To learn how to get your own Font Awesome Kit Code, click here. It will look something like the following.

<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/12345abcde.js" crossorigin="anonymous"></script>

Then, copy and paste this code into Settings > Advanced > Code Injection > Footer

<!-- Custom Radio Icon -->
<script>
(function () {
  var radio = document.querySelectorAll(".radio label");
  for (let j = 0; j < radio.length; j++) {
    var newRadio = document.createElement('i');
    newRadio.classList.add('fa-solid', 'fa-gear');
    radio[j].append(newRadio);
  }
})();
</script>

The following code sets the icon. Go to Font Awesome and find the icon you want to use. It must be one of the “Solid Style” Icons (linked here) in order to use it for free (otherwise you will need to purchase a Pro Font Awesome Account). Click on the icon and copy the class for that icon. The first class needs to be fa-solid, but you can change fa-gear to match the icon you found.

('fa-solid', 'fa-gear')

Finally, copy and paste the following into Design > Custom CSS.

input[type="radio"] {
  opacity: 0;
}

.radio i {
  font-family: "FontAwesome";
  position: absolute;
  left: 0;
  margin-top: 5px;
}

input[type="radio"] + i {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
}

input[type="radio"]:hover + i,
input[type="radio"]:checked + i,
input[type="radio"]:focus + i {
  color: red !important; /* color when hover or checked */
}

Customize the colour you want the icon to change to when clicked or hovered over.

How To Use It

1. Copy and paste the code as indicated above.

2. Customize the icon you want to use.

3. Customize the color you want the icon to be when selected.