Skip to content

Instantly share code, notes, and snippets.

@noellesteegs
Created September 13, 2019 09:15
Show Gist options
  • Save noellesteegs/3a200fe3a9e8d65e7178f86c3eff279d to your computer and use it in GitHub Desktop.
Save noellesteegs/3a200fe3a9e8d65e7178f86c3eff279d to your computer and use it in GitHub Desktop.
Replace default HTML checkboxes with Font Awesome icons
input, input::before {
margin: 0px !important;
top: 0px;
}
label {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label input {
cursor: pointer;
font-size: 1em;
height: 0px;
margin: 0px;
opacity: 0;
width: 0px !important;
}
label span::before {
color: black;
content: '\f0c8';
display: inline-block;
font-family: "Font Awesome 5 Pro";
font-size: 1.5em;
font-style: normal;
font-variant: normal;
font-weight: 400;
margin-right: 10px;
position: relative;
visibility: visible;
text-rendering: auto;
top: 3px;
-webkit-font-smoothing: antialiased;
}
@media (min-width: 768px) {
label:hover span::before {
content: '\f14a';
filter: alpha(opacity=50);
font-family: "Font Awesome 5 Pro";
font-weight: 400;
opacity: 0.5;
}
}
label input:checked ~ span::before {
content: '\f14a';
filter: alpha(opacity=100);
font-family: "Font Awesome 5 Pro";
font-weight: 400;
opacity: 1;
}
@media (min-width: 768px) {
label input:checked:hover ~ span::before {
color: black;
filter: alpha(opacity=50);
opacity: 0.5;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment