Skip to content

Commit 8991f85

Browse files
author
Tim van der Horst
committed
Updated README.md
1 parent 9152946 commit 8991f85

File tree

1 file changed

+71
-21
lines changed

1 file changed

+71
-21
lines changed

README.md

+71-21
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
Awesome Bootstrap Checkbox
22
==========================
33

4-
Font Awesome Bootstrap Checkboxes & Radios plugin. Pure css way to make inputs look prettier. **No javascript**!
4+
[Font Awesome][] [Bootstrap][] Checkboxes & Radios plugin. Pure CSS way to make inputs look prettier. **No Javascript!**
55

6-
**[Demo](http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/)**
6+
**[Demo][]**
77

88
Use
99
------------
1010

11-
First just include **awesome-bootstrap-checkbox.css** somewhere in your html. Or **awesome-bootstrap-checkbox.scss** if you use sass.
12-
Next everything is based on code convention. Here is checkbox markup from Bootstrap site:
11+
First just include **awesome-bootstrap-checkbox.css** somewhere in your HTML, or add the equivalent files to your [Sass](#using-sass) / [Less](#using-less) configuration.
12+
Next, everything is based on code convention. Here is checkbox markup from Bootstrap site:
1313

1414
````html
1515
<form role="form">
@@ -85,37 +85,87 @@ You may use `checkbox-primary`, `checkbox-danger`, `radio-info`, etc to style ch
8585

8686
`checkbox-single` and `radio-single` for inputs without label text.
8787

88-
Glyphicons way (Opt-out Font Awesome)
88+
Using [Sass][]
89+
----------
90+
91+
As per example in the `demo` folder, to use Font Awesome you'll have to `@import` the following library parts:
92+
93+
````scss
94+
@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables";
95+
@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/mixins";
96+
97+
@import "../bower_components/Font-Awesome/scss/variables";
98+
99+
@import "../awesome-bootstrap-checkbox";
100+
````
101+
102+
Adjust this to the path where your bootstrap and font-awesome files are located.
103+
104+
Using [Less][]
105+
----------
106+
107+
Just like the Sass setup, you'll have to `@import` the following library parts:
108+
109+
````less
110+
@import "../bower_components/bootstrap/less/variables";
111+
@import "../bower_components/bootstrap/less/mixins";
112+
113+
@import "../bower_components/Font-Awesome/less/variables";
114+
115+
@import "../awesome-bootstrap-checkbox";
116+
````
117+
118+
Custom icon font
89119
------------
90120

91-
If you want to use glyphicons instead of font-awesome then override `.checkbox` class:
92-
````css
93-
.checkbox input[type=checkbox]:checked + label:after {
94-
font-family: 'Glyphicons Halflings';
95-
content: "\e013";
96-
}
121+
If you want to use another icon font instead of Font Awesome, such as [Glyphicons][], override the default variables:
122+
````scss
123+
$font-family-icon: 'Glyphicons Halflings';
124+
$check-icon: "\e013";
125+
97126
.checkbox label:after {
98127
padding-left: 4px;
99128
padding-top: 2px;
100129
font-size: 9px;
101130
}
102131
````
103132

104-
Using SASS
105-
----------
133+
or for Less:
134+
````less
135+
@font-family-icon: 'Glyphicons Halflings';
136+
@check-icon: "\e013";
106137

107-
As per example in the `demo` folder, to use these **awesome** you'll have to `@import` the following library parts:
138+
// Same styles as the Sass example...
139+
````
108140

109-
````scss
110-
@import "../bootstrap/bootstrap/variables";
111-
@import "../bootstrap/bootstrap/mixins";
141+
Or for plain CSS, override the `.checkbox` class (and `.styled` class for Opera):
142+
````css
143+
input[type="checkbox"].styled:checked + label:after,
144+
input[type="radio"].styled:checked + label:after,
145+
.checkbox input[type=checkbox]:checked + label:after {
146+
font-family: 'Glyphicons Halflings';
147+
content: "\e013";
148+
}
112149

113-
@import "../font-awesome/variables";
150+
input[type="checkbox"].styled:checked label:after,
151+
input[type="radio"].styled:checked label:after,
152+
.checkbox label:after {
153+
padding-left: 4px;
154+
padding-top: 2px;
155+
font-size: 9px;
156+
}
114157
````
115158

116-
Adjust this to the path where your bootstrap and font-awesome files are located.
117-
118159
Credits
119160
------------
120161

121-
Based on [Official Bootstrap Sass port](https://github.com/twbs/bootstrap-sass) and awesome [Font Awesome](https://github.com/FortAwesome/Font-Awesome).
162+
Based on the [Official Bootstrap Sass port][Bootstrap Sass] and the awesome [Font Awesome][].
163+
164+
165+
[Demo]: http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/
166+
[Bootstrap]: http://getbootstrap.com/
167+
[Bootstrap Sass]: https://github.com/twbs/bootstrap-sass
168+
[Font Awesome]: https://github.com/FortAwesome/Font-Awesome
169+
[Glyphicons]: http://getbootstrap.com/components/#glyphicons
170+
[Sass]: http://sass-lang.com/
171+
[Less]: http://lesscss.org/

0 commit comments

Comments
 (0)