@@ -4,15 +4,15 @@ Awesome Bootstrap Checkbox
4
4
[ ![ NPM downloads] ( https://img.shields.io/npm/dm/awesome-bootstrap-checkbox.svg?style=flat )] ( https://www.npmjs.com/package/awesome-bootstrap-checkbox )
5
5
[ ![ 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 )
6
6
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! **
8
8
9
- ** [ Demo] ( http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/ ) **
9
+ ** [ Demo] [ ] **
10
10
11
11
Use
12
12
------------
13
13
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:
16
16
17
17
```` html
18
18
<form role =" form" >
@@ -88,37 +88,74 @@ You may use `abc-checkbox-primary`, `abc-checkbox-danger`, `abc-radio-info`, etc
88
88
89
89
` abc-checkbox-single ` and ` abc-radio-single ` for inputs without label text.
90
90
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
92
117
------------
93
118
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):
95
132
```` css
133
+ input [type = " checkbox" ].styled :checked + label :after ,
134
+ input [type = " radio" ].styled :checked + label :after ,
96
135
.abc-checkbox input [type = checkbox ]:checked + label :after {
97
136
font-family : ' Glyphicons Halflings' ;
98
137
content : " \e013 " ;
99
138
}
139
+
140
+ input [type = " checkbox" ].styled :checked label :after ,
141
+ input [type = " radio" ].styled :checked label :after ,
100
142
.abc-checkbox label :after {
101
143
padding-left : 4px ;
102
144
padding-top : 2px ;
103
145
font-size : 9px ;
104
146
}
105
147
````
106
148
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
-
121
149
Credits
122
150
------------
123
151
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