forked from maxweldsouza/font-awesome-controls
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
50 lines (50 loc) · 8.75 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="fac.css" rel="stylesheet">
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container"><h1>Font Awesome Controls</h1><div class="col-md-12"><h2>Features</h2><ul><li>Mit Licence</li><li>Colors from bootstrap </li><li>No unclickable gap between the checkbox and label</li><li>Mouse select text disabled</li><li>Pointer on hover</li><li>Animated transition</li><li>Scales with font-size</li><li>Easy to modify</li></ul></div><div class="col-md-12"><h2>Usage</h2><div><div>Select a color using: <code>.fac-default .fac-primary .fac-success .fac-info .fac-warning .fac-danger</code></div><div>Controls can be of type: <code>.fac-checkbox .fac-checkbox-round .fac-checkbox-o .fac-checkbox-round-o .fac-radio</code></div></div></div><div class="col-md-12"><h2>Example</h2><div>The empty span is necessary. Also separate input and label tags are required.<pre><code><div class="fac fac-checkbox fac-default ">
<span></span>
<input id="box-example" type="checkbox" value="1" ><label for="box-example">Example</label>
</div></code></pre><div><div class="fac fac-checkbox fac-default "><span></span>
<input id="box-example" type="checkbox" value="1" checked=""><label for="box-example">Example</label></div></div></div></div><div class="col-md-4"><h2>Sizes</h2><div><div style="font-size:2.5em;"><div><div class="fac fac-checkbox fac-primary "><span></span>
<input id="box-example-2.5" type="checkbox" value="1" checked=""><label for="box-example-2.5">Example</label></div></div></div><div style="font-size:2.0em;"><div><div class="fac fac-checkbox fac-primary "><span></span>
<input id="box-example-2" type="checkbox" value="1" checked=""><label for="box-example-2">Example</label></div></div></div><div style="font-size:1.5em;"><div><div class="fac fac-checkbox fac-primary "><span></span>
<input id="box-example-1.5" type="checkbox" value="1" checked=""><label for="box-example-1.5">Example</label></div></div></div><div style="font-size:1em;"><div><div class="fac fac-checkbox fac-primary "><span></span>
<input id="box-example-1" type="checkbox" value="1" checked=""><label for="box-example-1">Example</label></div></div></div></div></div><div class="col-md-4"><h2>Checkboxes Square</h2><div style="font-size:1.5em;"><div><div class="fac fac-checkbox fac-default "><span></span>
<input id="box1-fac-checkbox " type="checkbox" value="1" checked=""><label for="box1-fac-checkbox ">Default</label></div></div><div><div class="fac fac-checkbox fac-primary "><span></span>
<input id="box2-fac-checkbox " type="checkbox" value="1" checked=""><label for="box2-fac-checkbox ">Primary</label></div></div><div><div class="fac fac-checkbox fac-success "><span></span>
<input id="box3-fac-checkbox " type="checkbox" value="1" checked=""><label for="box3-fac-checkbox ">Success</label></div></div><div><div class="fac fac-checkbox fac-info "><span></span>
<input id="box4-fac-checkbox " type="checkbox" value="1" checked=""><label for="box4-fac-checkbox ">Info</label></div></div><div><div class="fac fac-checkbox fac-warning "><span></span>
<input id="box5-fac-checkbox " type="checkbox" value="1" checked=""><label for="box5-fac-checkbox ">Warning</label></div></div><div><div class="fac fac-checkbox fac-danger "><span></span>
<input id="box6-fac-checkbox " type="checkbox" value="1" checked=""><label for="box6-fac-checkbox ">Danger</label></div></div></div></div><div class="col-md-4"><h2>Checkboxes Round</h2><div style="font-size:1.5em;"><div><div class="fac fac-checkbox-round fac-default "><span></span>
<input id="box1-fac-checkbox-round " type="checkbox" value="1" checked=""><label for="box1-fac-checkbox-round ">Default</label></div></div><div><div class="fac fac-checkbox-round fac-primary "><span></span>
<input id="box2-fac-checkbox-round " type="checkbox" value="1" checked=""><label for="box2-fac-checkbox-round ">Primary</label></div></div><div><div class="fac fac-checkbox-round fac-success "><span></span>
<input id="box3-fac-checkbox-round " type="checkbox" value="1" checked=""><label for="box3-fac-checkbox-round ">Success</label></div></div><div><div class="fac fac-checkbox-round fac-info "><span></span>
<input id="box4-fac-checkbox-round " type="checkbox" value="1" checked=""><label for="box4-fac-checkbox-round ">Info</label></div></div><div><div class="fac fac-checkbox-round fac-warning "><span></span>
<input id="box5-fac-checkbox-round " type="checkbox" value="1" checked=""><label for="box5-fac-checkbox-round ">Warning</label></div></div><div><div class="fac fac-checkbox-round fac-danger "><span></span>
<input id="box6-fac-checkbox-round " type="checkbox" value="1" checked=""><label for="box6-fac-checkbox-round ">Danger</label></div></div></div></div><div class="col-md-4"><h2>Radio Buttons</h2><div style="font-size:1.5em;"><div><div class="fac fac-radio fac-default "><span></span>
<input id="box1-fac-radio " type="radio" name="rad" value="1"><label for="box1-fac-radio ">Default</label></div></div><div><div class="fac fac-radio fac-primary "><span></span>
<input id="box2-fac-radio " type="radio" name="rad" value="1"><label for="box2-fac-radio ">Primary</label></div></div><div><div class="fac fac-radio fac-success "><span></span>
<input id="box3-fac-radio " type="radio" name="rad" value="1"><label for="box3-fac-radio ">Success</label></div></div><div><div class="fac fac-radio fac-info "><span></span>
<input id="box4-fac-radio " type="radio" name="rad" value="1"><label for="box4-fac-radio ">Info</label></div></div><div><div class="fac fac-radio fac-warning "><span></span>
<input id="box5-fac-radio " type="radio" name="rad" value="1"><label for="box5-fac-radio ">Warning</label></div></div><div><div class="fac fac-radio fac-danger "><span></span>
<input id="box6-fac-radio " type="radio" name="rad" value="1"><label for="box6-fac-radio ">Danger</label></div></div></div></div><div class="col-md-4"><h2>Checkboxes Square Outline</h2><div style="font-size:1.5em;"><div><div class="fac fac-checkbox-o fac-default "><span></span>
<input id="box1-fac-checkbox-o " type="checkbox" value="1" checked=""><label for="box1-fac-checkbox-o ">Default</label></div></div><div><div class="fac fac-checkbox-o fac-primary "><span></span>
<input id="box2-fac-checkbox-o " type="checkbox" value="1" checked=""><label for="box2-fac-checkbox-o ">Primary</label></div></div><div><div class="fac fac-checkbox-o fac-success "><span></span>
<input id="box3-fac-checkbox-o " type="checkbox" value="1" checked=""><label for="box3-fac-checkbox-o ">Success</label></div></div><div><div class="fac fac-checkbox-o fac-info "><span></span>
<input id="box4-fac-checkbox-o " type="checkbox" value="1" checked=""><label for="box4-fac-checkbox-o ">Info</label></div></div><div><div class="fac fac-checkbox-o fac-warning "><span></span>
<input id="box5-fac-checkbox-o " type="checkbox" value="1" checked=""><label for="box5-fac-checkbox-o ">Warning</label></div></div><div><div class="fac fac-checkbox-o fac-danger "><span></span>
<input id="box6-fac-checkbox-o " type="checkbox" value="1" checked=""><label for="box6-fac-checkbox-o ">Danger</label></div></div></div></div><div class="col-md-4"><h2>Checkboxes Round Outline</h2><div style="font-size:1.5em;"><div><div class="fac fac-checkbox-round-o fac-default "><span></span>
<input id="box1-fac-checkbox-round-o " type="checkbox" value="1" checked=""><label for="box1-fac-checkbox-round-o ">Default</label></div></div><div><div class="fac fac-checkbox-round-o fac-primary "><span></span>
<input id="box2-fac-checkbox-round-o " type="checkbox" value="1" checked=""><label for="box2-fac-checkbox-round-o ">Primary</label></div></div><div><div class="fac fac-checkbox-round-o fac-success "><span></span>
<input id="box3-fac-checkbox-round-o " type="checkbox" value="1" checked=""><label for="box3-fac-checkbox-round-o ">Success</label></div></div><div><div class="fac fac-checkbox-round-o fac-info "><span></span>
<input id="box4-fac-checkbox-round-o " type="checkbox" value="1" checked=""><label for="box4-fac-checkbox-round-o ">Info</label></div></div><div><div class="fac fac-checkbox-round-o fac-warning "><span></span>
<input id="box5-fac-checkbox-round-o " type="checkbox" value="1" checked=""><label for="box5-fac-checkbox-round-o ">Warning</label></div></div><div><div class="fac fac-checkbox-round-o fac-danger "><span></span>
<input id="box6-fac-checkbox-round-o " type="checkbox" value="1" checked=""><label for="box6-fac-checkbox-round-o ">Danger</label></div></div></div></div></div>
</body>
</html>