-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
117 lines (111 loc) · 3.3 KB
/
index.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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple FontAwesome IconPicker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link href="simple-iconpicker.min.css" rel='stylesheet' type='text/css' />
<script type='text/javascript' src="simple-iconpicker.min.js"></script>
<script>
var whichInput = 0;
$(document).ready(function(){
$('.input1').iconpicker(".input1");
$('#inputid2').iconpicker("#inputid2");
$('.input3').iconpicker(".input3");
});
</script>
</head>
<body>
<header>
<h1>Simple FontAwesome IconPicker</h1>
<h2>(c) 2016 <a href="http://www.howlthemes.com">HowlThemes</a><br/>Licensed under the MIT License</h2>
</header>
<div class="page">
<h3>Demo</h3>
<h4>Value Null</h4>
<input type="text" class="input1 input"/>
<br/><br/>
<h4>Value == Amazon</h4>
<input type="text" class="input" id="inputid2" value="fa-amazon"/>
<br/><br/>
<h4>Just for fun</h4>
<input type="text" class="input3 input"/>
<br/><br/>
</div>
<div class="page">
<h3>How to use</h3>
<p><b>Step 1</b>: Add jQuery and fontawesome files to webpage.</p>
<p><b>Step 2</b>: Add <span class="incode">simple-iconpicker.js</span> and <span class="incode">simple-iconpicker.css</span> file above <span class="incode"></head></span> tag</p>
<code>
<link href="simple-iconpicker.min.css" rel='stylesheet' type='text/css' /><br/>
<script src="simple-iconpicker.min.js" type='text/javascript'></script>
</code>
<p><b>Step 3</b>: Now add following script above <span class="incode"></head></span>, and replace <span class="incode">.selector</span> with inputbox class.</p>
<code>
$('.selector').iconpicker(".selector");
</code>
</div>
<style>
body{
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
header {
margin: 20px;
}
header h2 {
font-weight: 300;
font-size: 20px;
line-height: 28px;
}
header h2 a{
text-decoration: none;
border-bottom: 1px solid #333;
color:#333;
text-transform: uppercase;
}
.page{
border:1px solid #bbb;
margin:20px;
padding:20px;
}
h3{
background:#ccc;
border: 1px solid #bbb;
color:#333;
font-size:30px;
padding:10px;
margin:-20px;
margin-bottom: 20px;
}
.input{
border:1px solid #ccc;
background:#efefef;
padding:10px;
font-size: 14px;
border-radius:3px;
outline: none;
}
.input:focus{
border-color:#4598ff;
}
h4{
font-weight: normal;
margin-bottom: 10px;
}
.incode{
background:#efefef;
padding:3px;
color:#920000;
font-family: monospace;
}
code{
background:#efefef;
border: 1px solid #ccc;
padding: 10px;
display:block;
line-height: 18px;
}
</style>
</body>
</html>