@@ -4,15 +4,15 @@ Awesome Bootstrap Checkbox
44[ ![ NPM downloads] ( https://img.shields.io/npm/dm/awesome-bootstrap-checkbox.svg?style=flat )] ( https://www.npmjs.com/package/awesome-bootstrap-checkbox )
55[ ![ Dependency Status] ( https://img.shields.io/david/dev/flatlogic/awesome-bootstrap-checkbox.svg?branch=master&style=flat )] ( https://www.npmjs.com/package/awesome-bootstrap-checkbox )
66
7- Font Awesome Bootstrap Checkboxes & ; Radios plugin. Pure css way to make inputs look prettier. ** No javascript ** !
7+ [ Font Awesome] [ ] [ Bootstrap] [ ] Checkboxes & Radios plugin. Pure CSS way to make inputs look prettier. ** No Javascript! **
88
9- ** [ Demo] ( http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/ ) **
9+ ** [ Demo] [ ] **
1010
1111Use
1212------------
1313
14- First just include ** awesome-bootstrap-checkbox.css** somewhere in your html. Or ** awesome-bootstrap-checkbox.scss ** if you use sass.
15- Next everything is based on code convention. Here is checkbox markup from Bootstrap site:
14+ First just include ** awesome-bootstrap-checkbox.css** somewhere in your HTML, or add the equivalent files to your [ Sass ] ( #using- sass) configuration .
15+ Next, everything is based on code convention. Here is checkbox markup from Bootstrap site:
1616
1717```` html
1818<form role =" form" >
@@ -88,37 +88,74 @@ You may use `abc-checkbox-primary`, `abc-checkbox-danger`, `abc-radio-info`, etc
8888
8989` abc-checkbox-single ` and ` abc-radio-single ` for inputs without label text.
9090
91- Glyphicons way (Opt-out Font Awesome)
91+ Inputs without label text:
92+
93+ ```` html
94+ <div class =" checkbox abc-checkbox" >
95+ <input type =" checkbox" class =" styled" id =" singleCheckbox" value =" option1" aria-label =" Single checkbox One" >
96+ <label for =" singleCheckbox" ></label >
97+ </div >
98+ ````
99+
100+ Using [ Sass] [ ]
101+ ----------
102+
103+ As per example in the ` demo ` folder, to use Font Awesome you'll have to ` @import ` the following library parts:
104+
105+ ```` scss
106+ @import " ../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables" ;
107+ @import " ../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/mixins" ;
108+
109+ @import " ../bower_components/Font-Awesome/scss/variables" ;
110+
111+ @import " ../awesome-bootstrap-checkbox" ;
112+ ````
113+
114+ Adjust this to the path where your bootstrap and font-awesome files are located.
115+
116+ Custom icon font
92117------------
93118
94- If you want to use glyphicons instead of font-awesome then override ` .abc-checkbox ` class:
119+ If you want to use another icon font instead of Font Awesome, such as [ Glyphicons] [ ] , override the default variables:
120+ ```` scss
121+ $font-family-icon : ' Glyphicons Halflings' ;
122+ $check-icon : " \e013 " ;
123+
124+ .abc-checkbox label :after {
125+ padding-left : 4px ;
126+ padding-top : 2px ;
127+ font-size : 9px ;
128+ }
129+ ````
130+
131+ Or for plain CSS, override the ` .abc-checkbox ` class (and ` .styled ` class for Opera):
95132```` css
133+ input [type = " checkbox" ].styled :checked + label :after ,
134+ input [type = " radio" ].styled :checked + label :after ,
96135.abc-checkbox input [type = checkbox ]:checked + label :after {
97136 font-family : ' Glyphicons Halflings' ;
98137 content : " \e013 " ;
99138}
139+
140+ input [type = " checkbox" ].styled :checked label :after ,
141+ input [type = " radio" ].styled :checked label :after ,
100142.abc-checkbox label :after {
101143 padding-left : 4px ;
102144 padding-top : 2px ;
103145 font-size : 9px ;
104146}
105147````
106148
107- Using SASS
108- ----------
109-
110- As per example in the ` demo ` folder, to use these ** awesome** you'll have to ` @import ` the following library parts:
111-
112- ```` scss
113- @import " ../bootstrap/scss/variables" ;
114- @import " ../bootstrap/scss/mixins" ;
115-
116- @import " ../Font-Awesome/scss/variables" ;
117- ````
118-
119- Adjust this to the path where your bootstrap and font-awesome files are located.
120-
121149Credits
122150------------
123151
124- Based on the [ Bootstrap 4] [ http://getbootstrap.com/ ] and the awesome [ Font Awesome] ( https://github.com/FortAwesome/Font-Awesome ) .
152+ Based on the [ Official Bootstrap Sass port] [ Bootstrap Sass ] and the awesome [ Font Awesome] [ ] .
153+
154+
155+ [ Demo ] : http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/
156+ [ Bootstrap ] : http://getbootstrap.com/
157+ [ Bootstrap Sass ] : https://github.com/twbs/bootstrap-sass
158+ [ Font Awesome ] : https://github.com/FortAwesome/Font-Awesome
159+ [ Glyphicons ] : http://getbootstrap.com/components/#glyphicons
160+ [ Sass ] : http://sass-lang.com/
161+ [ Less ] : http://lesscss.org/
0 commit comments