Created
August 15, 2014 16:00
-
-
Save stevemayhew/1f87e858f59c7dede06e to your computer and use it in GitHub Desktop.
Custom Checkbox FontAwesome Checkbox - No Images! // source http://jsbin.com/pukad/6
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="FontAwesome Checkbox - No Images!" /> | |
| <meta charset="utf-8"> | |
| <title>Custom Checkbox</title> | |
| <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="http://tvonline.atlanticbb.net/assets/tve/common/css/vendor/necolas/normalize.css"/> | |
| <link rel="stylesheet" type="text/css" href="http://tvonline.atlanticbb.net/assets/tve/abb/css/tipsy.css"> | |
| <link rel='stylesheet' type="text/css" href="http://tvonline.atlanticbb.net/assets/tve/common/css/vendor/qtip2/jquery.qtip.css"> | |
| <link rel="stylesheet" type="text/css" href="http://tvonline.atlanticbb.net/assets/tve/common/js/vendor/ezmark/css/ezmark.css"> | |
| <link rel='stylesheet' type="text/css" href="http://tvonline.atlanticbb.net/assets/tve/common/css/vendor/jquery-ui/jquery-ui.css"> | |
| <link rel="stylesheet" type="text/css" href="http://tvonline.atlanticbb.net/assets/tve/common/css/common.css"> | |
| <link rel="stylesheet" type="text/css" href="http://tvonline.atlanticbb.net/assets/tve/abb/css/theme.css"> | |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> | |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script> | |
| <script type="text/javascript" src="http://tvonline.atlanticbb.net/assets/tve/common/js/vendor/ezmark/js/jquery.ezmark.js"></script> | |
| <style id="jsbin-css"> | |
| .demo { | |
| padding: 20px; | |
| } | |
| .demo p, .demo h3 { | |
| font-family: 'Fira Sans', tahoma, sans-serif; | |
| color: rgb(159,189,209); | |
| } | |
| input[type='checkbox'].custom-check { | |
| display: none; | |
| } | |
| label { | |
| cursor: pointer; | |
| -moz-user-select: none; | |
| -webkit-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| /** Align so checked/unchecked state match layout */ | |
| .checkbox-box { | |
| text-align: center; | |
| width: 1.1em; | |
| font-size: 1.1em; | |
| } | |
| /** the square-o and check-square-o */ | |
| .checkbox-box:before { | |
| content: "\f096"; | |
| } | |
| .checkbox-box:hover { | |
| color: rgb(145,97,3); | |
| } | |
| .checkbox-box.is-checked:before { | |
| content: "\f046"; | |
| color: rgb(145,97,3); | |
| } | |
| .image-available-online { | |
| font-size: 1.2em; | |
| background: none; | |
| } | |
| .image-available-online:before { | |
| color: rgb(87, 209, 87); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="demo"> | |
| <h3>Font Only Icons</h3> | |
| <p>This simple demo shows how some of our more basic icons and a custom check box can be done with no images, using only scalable font icons.</p> | |
| <span class="one-pass-watchnow-filter"> | |
| <label><span class="hint">Show only:</span> | |
| <input class="js-filter-watchnow custom-check" type="checkbox"> | |
| Watch Now <span class="image-available-online fa fa-play"></span></label> | |
| </span> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| $(function() { | |
| $.widget('x.faCheckbox', { | |
| options: {}, | |
| _create: function() { | |
| var self = this; | |
| this._$icon = $('<i class="fa checkbox-box">').insertAfter($(this.element)); | |
| $(this.element).change(function() { | |
| console.log("Checked: " + $(this).is(':checked')); | |
| self._$icon.toggleClass('is-checked', $(this).is(':checked')); | |
| }); | |
| } | |
| }); | |
| $("input[type='checkbox'].custom-check").faCheckbox(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .demo { | |
| padding: 20px; | |
| } | |
| .demo p, .demo h3 { | |
| font-family: 'Fira Sans', tahoma, sans-serif; | |
| color: rgb(159,189,209); | |
| } | |
| input[type='checkbox'].custom-check { | |
| display: none; | |
| } | |
| label { | |
| cursor: pointer; | |
| -moz-user-select: none; | |
| -webkit-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| /** Align so checked/unchecked state match layout */ | |
| .checkbox-box { | |
| text-align: center; | |
| width: 1.1em; | |
| font-size: 1.1em; | |
| } | |
| /** the square-o and check-square-o */ | |
| .checkbox-box:before { | |
| content: "\f096"; | |
| } | |
| .checkbox-box:hover { | |
| color: rgb(145,97,3); | |
| } | |
| .checkbox-box.is-checked:before { | |
| content: "\f046"; | |
| color: rgb(145,97,3); | |
| } | |
| .image-available-online { | |
| font-size: 1.2em; | |
| background: none; | |
| } | |
| .image-available-online:before { | |
| color: rgb(87, 209, 87); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function() { | |
| $.widget('x.faCheckbox', { | |
| options: {}, | |
| _create: function() { | |
| var self = this; | |
| this._$icon = $('<i class="fa checkbox-box">').insertAfter($(this.element)); | |
| $(this.element).change(function() { | |
| console.log("Checked: " + $(this).is(':checked')); | |
| self._$icon.toggleClass('is-checked', $(this).is(':checked')); | |
| }); | |
| } | |
| }); | |
| $("input[type='checkbox'].custom-check").faCheckbox(); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment