Skip to content

Commit 60e935a

Browse files
committed
Update README.md
1 parent f38bcc0 commit 60e935a

File tree

1 file changed

+58
-21
lines changed

1 file changed

+58
-21
lines changed

README.md

Lines changed: 58 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -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

1111
Use
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-
121149
Credits
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

Comments
 (0)