Simple CSS Checkboxes with Font Awesome
How do I make an simple css checkboxes with font awesome?
Custom CSS checkboxes using the Font Awesome icon font. What is a simple css checkboxes with font awesome? How do you make a simple css checkboxes with font awesome? This script and codes were developed by James Barnett on 11 August 2022, Thursday.
Simple CSS Checkboxes with Font Awesome - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple CSS Checkboxes with Font Awesome</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Custom Checkboxes</h1>
<div> <input id="box1" type="checkbox" /> <label for="box1">Checkbox 1</label> <input id="box2" type="checkbox" /> <label for="box2">Checkbox 2</label> <input id="box3" type="checkbox" /> <label for="box3">Checkbox 3</label>
</div>
</body>
</html>Simple CSS Checkboxes with Font Awesome - Script Codes CSS Codes
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
/*** basic styles ***/
body { margin: 30px; }
h1 { font-size: 1.5em; }
label { font-size: 24px; }
div { width: 175px; margin-left: 20px;
}
/*** custom checkboxes ***/
input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before { font-family: FontAwesome; display: inline-block;
}
input[type=checkbox] + label:before { content: "\f096"; } /* unchecked icon */
input[type=checkbox] + label:before { letter-spacing: 10px; } /* space between checkbox and label */
input[type=checkbox]:checked + label:before { content: "\f046"; } /* checked icon */
input[type=checkbox]:checked + label:before { letter-spacing: 5px; } /* allow space for check mark */
| Developer | James Barnett |
| Username | jamesbarnett |
| Uploaded | August 11, 2022 |
| Rating | 4.5 |
| Size | 1,848 Kb |
| Views | 32,384 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
| Name | Size |
| Ready to Launch | 10,309 Kb |
| A Pen by James Barnett | 1,548 Kb |
| Pure CSS Star Rating Widget | 2,156 Kb |
| Custom select box | 2,323 Kb |
| Progress bar for counting checkboxes | 2,268 Kb |
| Piet Mondrian Composition II | 1,919 Kb |
| Console.log output in codepen | 1,713 Kb |
| Github-style Daily Activity Chart | 4,334 Kb |
| Search field | 2,100 Kb |
| Subscribe form | 2,101 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
| Name | Username | Size |
| GLSL Hills | Ykob | 6,991 Kb |
| My three.js practice | Esambino | 3,203 Kb |
| SlideupBoxes | Gavra | 23,772 Kb |
| Simple Carousel Pure CSS | Dangvanthanh | 4,080 Kb |
| Polygon Dodecahedron in CSS | Vennsoh | 7,606 Kb |
| Glowing Pulse Form | Jackrugile | 2,542 Kb |
| VerbalExpressions Converter | Cmalven | 2,607 Kb |
| Apple website | Jds317 | 1,835 Kb |
| Haml Calendar | Katydecorah | 5,643 Kb |
| Animated Donut Chart | Jplhomer | 3,808 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!