{"id":1976,"date":"2021-06-05T21:13:20","date_gmt":"2021-06-05T21:13:20","guid":{"rendered":"http:\/\/localhost:10003\/?p=1976"},"modified":"2021-06-16T16:23:48","modified_gmt":"2021-06-16T20:23:48","slug":"font-awesome-checkbox","status":"publish","type":"post","link":"https:\/\/thewpgeek.com\/font-awesome-checkbox\/","title":{"rendered":"Font Awesome Checkbox"},"content":{"rendered":"\n<p>So, you loaded the whole FontAwesome library, you may as well make use of it! Lets turn those boring checkboxes into awesome ones.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Try it out : <\/h4>\n\n\n\n<style>\n.chkBox{\n    font-family: 'Font Awesome 5 Free';\n\t  font-size:3rem;\n    cursor:pointer;\n} \n#chk1{\n    display:none;\n}\n .chkBox input[type='checkbox']+ label:before {\n    content: \"\\f14a\";\n }\n .chkBox  input[type='checkbox']:checked + label:before {\n  content: \"\\f0c8\"; \n}\n<\/style>\n<div class=\"wrapper\" style=\"background-color: lightgray; display: flex; justify-content: space-around; align-items: center; padding: 10px; width: 300px; border-radius:10px\">\n<div class=\"chkBox\">\n <input type=\"checkbox\" id=\"chk1\" name=\"chk1\">\n   \n<label for=\"chk1\"> Item 1<\/label>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">HTML <\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"chkBox\"&gt;\n    &lt;input type=\"checkbox\" id=\"chk1\" name=\"chk1\"  \/&gt;\n    &lt;label for=\"chk1\"&gt; Item 1&lt;\/label&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">CSS<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>.chkBox{\n    font-family: 'Font Awesome 5 Free';\n    font-size:1.5rem;\n    cursor:pointer;\n} \n#chk1{\n    display:none;\n}\n    .chkBox input&#91;type='checkbox']+ label:before {\n    content: <strong>\"\\f14a\";<\/strong>\n }\n    .chkBox  input&#91;type='checkbox']:checked + label:before {\n     content: <strong>\"\\f0c8\";<\/strong>\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Notes<\/h4>\n\n\n\n<p>Font Awesome has lots of icons we can use to turn into checkboxes, using the basic code above just replace the unicode number with the ones below for different looks <\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h5 class=\"has-theme-yellow-background-color has-background wp-block-heading\">Circle Checkbox<\/h5>\n\n\n\n<style>.chkBox2{\n    font-family: 'Font Awesome 5 Free';\n    font-size:3rem;\n    cursor:pointer;\n} \n#chk2{\n    display:none;\n}\n    .chkBox2 input[type='checkbox']+ label:before {\n    content: \"\\f111\";\n }\n    .chkBox2  input[type='checkbox']:checked + label:before {\n     content: \"\\f058\";\n}<\/style>\n<div class=\"wrapper\" style=\"background-color: lightgray; display: flex; justify-content: space-around; align-items: center; padding: 10px; width: 100%; border-radius:10px\">\n<div class=\"chkBox2\">\n    <input type=\"checkbox\" id=\"chk2\" name=\"chk2\">\n    <label for=\"chk2\"> Item 1<\/label>\n<\/div><\/div>\n\n\n\n<p><strong>Unchecked :<\/strong> <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>content: \"\\f111\";<\/code><\/pre>\n\n\n\n<p><br><strong>Checked :<\/strong> <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>content: \"\\f058\";<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h5 class=\"has-theme-yellow-background-color has-background wp-block-heading\">Smile Checkbox<\/h5>\n\n\n\n<style>.chkBox3{\n    font-family: 'Font Awesome 5 Free';\n    font-size:3rem;\n    cursor:pointer;\n} \n#chk3{\n    display:none;\n}\n    .chkBox3 input[type='checkbox']+ label:before {\n    content: \"\\f5b3\";\n }\n    .chkBox3  input[type='checkbox']:checked + label:before {\n     content: \"\\f587\";\n}<\/style>\n<div class=\"wrapper\" style=\"background-color: lightgray; display: flex; justify-content: space-around; align-items: center; padding: 10px; width: 100%; border-radius:10px\">\n<div class=\"chkBox3\">\n    <input type=\"checkbox\" id=\"chk3\" name=\"chk3\">\n    <label for=\"chk3\"> Item 1<\/label>\n<\/div><\/div>\n\n\n\n<p><strong>Unchecked<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> content: \"\\f587\";<\/code><\/pre>\n\n\n\n<p><br><strong>Checked<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> content: \"\\f5b8\";<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h5 class=\"has-theme-yellow-background-color has-background wp-block-heading\">Thumbs Checkbox<\/h5>\n\n\n\n<style>.chkBox4{\n    font-family: 'Font Awesome 5 Free';\n    font-size:3rem;\n    cursor:pointer;\n} \n#chk4{\n    display:none;\n}\n    .chkBox4 input[type='checkbox']+ label:before {\n    content: \"\\f165\";\n }\n    .chkBox4  input[type='checkbox']:checked + label:before {\n     content: \"\\f164\";\n}<\/style>\n<div class=\"wrapper\" style=\"background-color: lightgray; display: flex; justify-content: space-around; align-items: center; padding: 10px; width: 100%; border-radius:10px\">\n<div class=\"chkBox4\">\n    <input type=\"checkbox\" id=\"chk4\" name=\"chk4\">   <label for=\"chk4\"> Item 1<\/label>\n<\/div><\/div>\n\n\n\n<p><strong>Unchecked:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>content: \"\\f00d\";<\/code><\/pre>\n\n\n\n<p><br><strong>Checked:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  content: \"\\f00c\";<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p>Check out the complete list and come up with your own combinations at <a href=\"https:\/\/fontawesome.com\/v5.15\/icons?d=gallery&amp;p=2&amp;m=free\">FontAwesome<\/a> The above are all free icons, but lots more options for paid FontAwesome users. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>So, you loaded the whole FontAwesome library, you may as well make use of it! Lets turn those boring checkboxes into awesome ones. Try it out : Item 1 HTML CSS Notes Font Awesome has lots of icons we can use to turn into checkboxes, using the basic code above just replace the unicode number [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":2664,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_uag_custom_page_level_css":"","footnotes":""},"categories":[2],"tags":[],"uagb_featured_image_src":{"full":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/checklist-2549229_1280.jpg",1280,853,false],"thumbnail":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/checklist-2549229_1280-150x150.jpg",150,150,true],"medium":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/checklist-2549229_1280-300x200.jpg",300,200,true],"medium_large":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/checklist-2549229_1280-768x512.jpg",768,512,true],"large":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/checklist-2549229_1280-1024x682.jpg",1024,682,true],"1536x1536":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/checklist-2549229_1280.jpg",1280,853,false],"2048x2048":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/checklist-2549229_1280.jpg",1280,853,false],"rigtest-featured":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/checklist-2549229_1280-720x480.jpg",720,480,true],"mailpoet_newsletter_max":["https:\/\/thewpgeek.com\/wp-content\/uploads\/2021\/06\/checklist-2549229_1280.jpg",1280,853,false]},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/thewpgeek.com\/author\/admin\/"},"uagb_comment_info":6,"uagb_excerpt":"So, you loaded the whole FontAwesome library, you may as well make use of it! Lets turn those boring checkboxes into awesome ones. Try it out : Item 1 HTML CSS Notes Font Awesome has lots of icons we can use to turn into checkboxes, using the basic code above just replace the unicode number&hellip;","_links":{"self":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/1976"}],"collection":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/comments?post=1976"}],"version-history":[{"count":1,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/1976\/revisions"}],"predecessor-version":[{"id":2665,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/posts\/1976\/revisions\/2665"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/media\/2664"}],"wp:attachment":[{"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/media?parent=1976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/categories?post=1976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thewpgeek.com\/wp-json\/wp\/v2\/tags?post=1976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}