spina-template 0.2.14 → 0.2.15

Sign up to get free protection for your applications and to get access to all the features.
Files changed (62) hide show
  1. checksums.yaml +4 -4
  2. data/.DS_Store +0 -0
  3. data/.fontcustom-manifest.json +199 -0
  4. data/app/.DS_Store +0 -0
  5. data/app/assets/.DS_Store +0 -0
  6. data/app/assets/fonts/spina/icons_spina.eot +0 -0
  7. data/app/assets/fonts/spina/icons_spina.svg +280 -0
  8. data/app/assets/fonts/spina/icons_spina.ttf +0 -0
  9. data/app/assets/fonts/spina/icons_spina.woff +0 -0
  10. data/app/assets/icons/spina/bars.svg +1 -0
  11. data/app/assets/icons/spina/bold.svg +1 -0
  12. data/app/assets/icons/spina/brush.svg +10 -0
  13. data/app/assets/icons/spina/caret-down.svg +1 -0
  14. data/app/assets/icons/spina/caret-left.svg +1 -0
  15. data/app/assets/icons/spina/caret-right.svg +1 -0
  16. data/app/assets/icons/spina/caret-up.svg +1 -0
  17. data/app/assets/icons/spina/chart-outline.svg +10 -0
  18. data/app/assets/icons/spina/check.svg +10 -0
  19. data/app/assets/icons/spina/chevron-down.svg +1 -0
  20. data/app/assets/icons/spina/chevron-left.svg +1 -0
  21. data/app/assets/icons/spina/chevron-right.svg +1 -0
  22. data/app/assets/icons/spina/chevron-up.svg +1 -0
  23. data/app/assets/icons/spina/code.svg +1 -0
  24. data/app/assets/icons/spina/cog-outline.svg +10 -0
  25. data/app/assets/icons/spina/cog.svg +10 -0
  26. data/app/assets/icons/spina/comment.svg +1 -0
  27. data/app/assets/icons/spina/cross.svg +10 -0
  28. data/app/assets/icons/spina/document.svg +10 -0
  29. data/app/assets/icons/spina/home.svg +1 -0
  30. data/app/assets/icons/spina/inbox-outline.svg +10 -0
  31. data/app/assets/icons/spina/italic.svg +1 -0
  32. data/app/assets/icons/spina/link.svg +1 -0
  33. data/app/assets/icons/spina/list-ul.svg +1 -0
  34. data/app/assets/icons/spina/mail-outline.svg +10 -0
  35. data/app/assets/icons/spina/media-library.svg +10 -0
  36. data/app/assets/icons/spina/pencil-outline.svg +10 -0
  37. data/app/assets/icons/spina/picture-o.svg +1 -0
  38. data/app/assets/icons/spina/plus.svg +10 -0
  39. data/app/assets/icons/spina/power-off.svg +10 -0
  40. data/app/assets/icons/spina/preview/icons_spina-preview.html +773 -0
  41. data/app/assets/icons/spina/preview.svg +10 -0
  42. data/app/assets/icons/spina/random.svg +10 -0
  43. data/app/assets/icons/spina/refresh.svg +13 -0
  44. data/app/assets/icons/spina/search.svg +10 -0
  45. data/app/assets/icons/spina/social-outline.svg +10 -0
  46. data/app/assets/icons/spina/trash.svg +10 -0
  47. data/app/assets/icons/spina/upload-outline.svg +14 -0
  48. data/app/assets/icons/spina/users-outline.svg +10 -0
  49. data/app/assets/stylesheets/spina/_buttons.css.sass +5 -2
  50. data/app/assets/stylesheets/spina/_fonts.css.sass +17 -0
  51. data/app/assets/stylesheets/spina/_forms.css.sass +11 -16
  52. data/app/assets/stylesheets/spina/_icons_spina.css.scss +42 -0
  53. data/app/assets/stylesheets/spina/_modal.css.sass +4 -1
  54. data/app/assets/stylesheets/spina/_sortable_lists.css.sass +1 -2
  55. data/app/assets/stylesheets/spina/_tables.css.sass +2 -4
  56. data/app/assets/stylesheets/spina.css.sass +7 -7
  57. data/config/fontcustom.yml +95 -0
  58. data/lib/spina/fontcustom/_icons_spina.css.scss +5 -0
  59. data/lib/spina/template/version.rb +1 -1
  60. data/lib/spina/template.rb +0 -1
  61. data/spina-template.gemspec +1 -1
  62. metadata +54 -7
data/app/assets/icons/spina/preview/icons_spina-preview.html ADDED
@@ -0,0 +1,773 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>icons_spina glyphs preview</title>
5
+
6
+ <style>
7
+ /* Page Styles */
8
+
9
+ * {
10
+ -moz-box-sizing: border-box;
11
+ -webkit-box-sizing: border-box;
12
+ box-sizing: border-box;
13
+ margin: 0;
14
+ padding: 0;
15
+ }
16
+
17
+ body {
18
+ background: #fff;
19
+ color: #444;
20
+ font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
21
+ }
22
+
23
+ a,
24
+ a:visited {
25
+ color: #888;
26
+ text-decoration: underline;
27
+ }
28
+ a:hover,
29
+ a:focus { color: #000; }
30
+
31
+ header {
32
+ border-bottom: 2px solid #ddd;
33
+ margin-bottom: 20px;
34
+ overflow: hidden;
35
+ padding: 20px 0;
36
+ }
37
+
38
+ header h1 {
39
+ color: #888;
40
+ float: left;
41
+ font-size: 36px;
42
+ font-weight: 300;
43
+ }
44
+
45
+ header a {
46
+ float: right;
47
+ font-size: 14px;
48
+ }
49
+
50
+ .container {
51
+ margin: 0 auto;
52
+ max-width: 1200px;
53
+ min-width: 960px;
54
+ padding: 0 40px;
55
+ width: 90%;
56
+ }
57
+
58
+ .glyph {
59
+ border-bottom: 1px dotted #ccc;
60
+ padding: 10px 0 20px;
61
+ margin-bottom: 20px;
62
+ }
63
+
64
+ .preview-glyphs { vertical-align: bottom; }
65
+
66
+ .preview-scale {
67
+ color: #888;
68
+ font-size: 12px;
69
+ margin-top: 5px;
70
+ }
71
+
72
+ .step {
73
+ display: inline-block;
74
+ line-height: 1;
75
+ position: relative;
76
+ width: 10%;
77
+ }
78
+
79
+ .step .letters,
80
+ .step i {
81
+ -webkit-transition: opacity .3s;
82
+ -moz-transition: opacity .3s;
83
+ -ms-transition: opacity .3s;
84
+ -o-transition: opacity .3s;
85
+ transition: opacity .3s;
86
+ }
87
+
88
+ .step:hover .letters { opacity: 1; }
89
+ .step:hover i { opacity: .3; }
90
+
91
+ .letters {
92
+ opacity: .3;
93
+ position: absolute;
94
+ }
95
+
96
+ .characters-off .letters { display: none; }
97
+ .characters-off .step:hover i { opacity: 1; }
98
+
99
+
100
+ .size-12 { font-size: 12px; }
101
+
102
+ .size-14 { font-size: 14px; }
103
+
104
+ .size-16 { font-size: 16px; }
105
+
106
+ .size-18 { font-size: 18px; }
107
+
108
+ .size-21 { font-size: 21px; }
109
+
110
+ .size-24 { font-size: 24px; }
111
+
112
+ .size-36 { font-size: 36px; }
113
+
114
+ .size-48 { font-size: 48px; }
115
+
116
+ .size-60 { font-size: 60px; }
117
+
118
+ .size-72 { font-size: 72px; }
119
+
120
+
121
+ .usage { margin-top: 10px; }
122
+
123
+ .usage input {
124
+ font-family: monospace;
125
+ margin-right: 3px;
126
+ padding: 2px 5px;
127
+ text-align: center;
128
+ }
129
+
130
+ .usage .point { width: 150px; }
131
+
132
+ .usage .class { width: 250px; }
133
+
134
+ footer {
135
+ color: #888;
136
+ font-size: 12px;
137
+ padding: 20px 0;
138
+ }
139
+
140
+ /* Icon Font: icons_spina */
141
+
142
+ @font-face {
143
+ font-family: "icons_spina";
144
+ src: url("../../../fonts/spina/icons_spina.eot");
145
+ src: url("../../../fonts/spina/icons_spina.eot?#iefix") format("embedded-opentype"),
146
+ url("../../../fonts/spina/icons_spina.woff") format("woff"),
147
+ url("../../../fonts/spina/icons_spina.ttf") format("truetype"),
148
+ url("../../../fonts/spina/icons_spina.svg#icons_spina") format("svg");
149
+ font-weight: normal;
150
+ font-style: normal;
151
+ }
152
+
153
+ @media screen and (-webkit-min-device-pixel-ratio:0) {
154
+ @font-face {
155
+ font-family: "icons_spina";
156
+ src: url("../../../fonts/spina/icons_spina.svg#icons_spina") format("svg");
157
+ }
158
+ }
159
+
160
+ [data-icon]:before { content: attr(data-icon); }
161
+
162
+ [data-icon]:before,
163
+ .icon-bars:before,
164
+ .icon-bold:before,
165
+ .icon-brush:before,
166
+ .icon-caret-down:before,
167
+ .icon-caret-left:before,
168
+ .icon-caret-right:before,
169
+ .icon-caret-up:before,
170
+ .icon-chart-outline:before,
171
+ .icon-check:before,
172
+ .icon-chevron-down:before,
173
+ .icon-chevron-left:before,
174
+ .icon-chevron-right:before,
175
+ .icon-chevron-up:before,
176
+ .icon-code:before,
177
+ .icon-cog:before,
178
+ .icon-cog-outline:before,
179
+ .icon-comment:before,
180
+ .icon-cross:before,
181
+ .icon-document:before,
182
+ .icon-home:before,
183
+ .icon-inbox-outline:before,
184
+ .icon-italic:before,
185
+ .icon-link:before,
186
+ .icon-list-ul:before,
187
+ .icon-mail-outline:before,
188
+ .icon-media-library:before,
189
+ .icon-pencil-outline:before,
190
+ .icon-picture-o:before,
191
+ .icon-plus:before,
192
+ .icon-power-off:before,
193
+ .icon-preview:before,
194
+ .icon-random:before,
195
+ .icon-refresh:before,
196
+ .icon-search:before,
197
+ .icon-social-outline:before,
198
+ .icon-trash:before,
199
+ .icon-upload-outline:before,
200
+ .icon-users-outline:before {
201
+ display: inline-block;
202
+ font-family: "icons_spina";
203
+ font-style: normal;
204
+ font-weight: normal;
205
+ font-variant: normal;
206
+ line-height: 1;
207
+ text-decoration: inherit;
208
+ text-rendering: optimizeLegibility;
209
+ text-transform: none;
210
+ -moz-osx-font-smoothing: grayscale;
211
+ -webkit-font-smoothing: antialiased;
212
+ font-smoothing: antialiased;
213
+ }
214
+
215
+ .icon-bars:before { content: "\f10e"; }
216
+ .icon-bold:before { content: "\f120"; }
217
+ .icon-brush:before { content: "\f115"; }
218
+ .icon-caret-down:before { content: "\f118"; }
219
+ .icon-caret-left:before { content: "\f119"; }
220
+ .icon-caret-right:before { content: "\f11a"; }
221
+ .icon-caret-up:before { content: "\f11b"; }
222
+ .icon-chart-outline:before { content: "\f109"; }
223
+ .icon-check:before { content: "\f10a"; }
224
+ .icon-chevron-down:before { content: "\f11c"; }
225
+ .icon-chevron-left:before { content: "\f11d"; }
226
+ .icon-chevron-right:before { content: "\f11e"; }
227
+ .icon-chevron-up:before { content: "\f11f"; }
228
+ .icon-code:before { content: "\f125"; }
229
+ .icon-cog:before { content: "\f105"; }
230
+ .icon-cog-outline:before { content: "\f106"; }
231
+ .icon-comment:before { content: "\f103"; }
232
+ .icon-cross:before { content: "\f116"; }
233
+ .icon-document:before { content: "\f100"; }
234
+ .icon-home:before { content: "\f102"; }
235
+ .icon-inbox-outline:before { content: "\f112"; }
236
+ .icon-italic:before { content: "\f121"; }
237
+ .icon-link:before { content: "\f124"; }
238
+ .icon-list-ul:before { content: "\f123"; }
239
+ .icon-mail-outline:before { content: "\f111"; }
240
+ .icon-media-library:before { content: "\f101"; }
241
+ .icon-pencil-outline:before { content: "\f10d"; }
242
+ .icon-picture-o:before { content: "\f126"; }
243
+ .icon-plus:before { content: "\f10b"; }
244
+ .icon-power-off:before { content: "\f104"; }
245
+ .icon-preview:before { content: "\f10c"; }
246
+ .icon-random:before { content: "\f10f"; }
247
+ .icon-refresh:before { content: "\f114"; }
248
+ .icon-search:before { content: "\f110"; }
249
+ .icon-social-outline:before { content: "\f108"; }
250
+ .icon-trash:before { content: "\f117"; }
251
+ .icon-upload-outline:before { content: "\f113"; }
252
+ .icon-users-outline:before { content: "\f107"; }
253
+ </style>
254
+
255
+ <!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
256
+
257
+ <script>
258
+ function toggleCharacters() {
259
+ var body = document.getElementsByTagName('body')[0];
260
+ body.className = body.className === 'characters-off' ? '' : 'characters-off';
261
+ }
262
+ </script>
263
+ </head>
264
+
265
+ <body class="characters-off">
266
+ <div id="page" class="container">
267
+ <header>
268
+ <h1>icons_spina contains 38 glyphs:</h1>
269
+ <a onclick="toggleCharacters(); return false;" href="#">Toggle Preview Characters</a>
270
+ </header>
271
+
272
+
273
+ <div class="glyph">
274
+ <div class="preview-glyphs">
275
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-bars" class="icon-bars"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-bars" class="icon-bars"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-bars" class="icon-bars"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-bars" class="icon-bars"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-bars" class="icon-bars"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-bars" class="icon-bars"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-bars" class="icon-bars"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-bars" class="icon-bars"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-bars" class="icon-bars"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-bars" class="icon-bars"></i></span>
276
+ </div>
277
+ <div class="preview-scale">
278
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
279
+ </div>
280
+ <div class="usage">
281
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-bars" />
282
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10e;" />
283
+ </div>
284
+ </div>
285
+
286
+ <div class="glyph">
287
+ <div class="preview-glyphs">
288
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-bold" class="icon-bold"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-bold" class="icon-bold"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-bold" class="icon-bold"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-bold" class="icon-bold"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-bold" class="icon-bold"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-bold" class="icon-bold"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-bold" class="icon-bold"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-bold" class="icon-bold"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-bold" class="icon-bold"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-bold" class="icon-bold"></i></span>
289
+ </div>
290
+ <div class="preview-scale">
291
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
292
+ </div>
293
+ <div class="usage">
294
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-bold" />
295
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf120;" />
296
+ </div>
297
+ </div>
298
+
299
+ <div class="glyph">
300
+ <div class="preview-glyphs">
301
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-brush" class="icon-brush"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-brush" class="icon-brush"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-brush" class="icon-brush"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-brush" class="icon-brush"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-brush" class="icon-brush"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-brush" class="icon-brush"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-brush" class="icon-brush"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-brush" class="icon-brush"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-brush" class="icon-brush"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-brush" class="icon-brush"></i></span>
302
+ </div>
303
+ <div class="preview-scale">
304
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
305
+ </div>
306
+ <div class="usage">
307
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-brush" />
308
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf115;" />
309
+ </div>
310
+ </div>
311
+
312
+ <div class="glyph">
313
+ <div class="preview-glyphs">
314
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-caret-down" class="icon-caret-down"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-caret-down" class="icon-caret-down"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-caret-down" class="icon-caret-down"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-caret-down" class="icon-caret-down"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-caret-down" class="icon-caret-down"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-caret-down" class="icon-caret-down"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-caret-down" class="icon-caret-down"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-caret-down" class="icon-caret-down"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-caret-down" class="icon-caret-down"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-caret-down" class="icon-caret-down"></i></span>
315
+ </div>
316
+ <div class="preview-scale">
317
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
318
+ </div>
319
+ <div class="usage">
320
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-caret-down" />
321
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf118;" />
322
+ </div>
323
+ </div>
324
+
325
+ <div class="glyph">
326
+ <div class="preview-glyphs">
327
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-caret-left" class="icon-caret-left"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-caret-left" class="icon-caret-left"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-caret-left" class="icon-caret-left"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-caret-left" class="icon-caret-left"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-caret-left" class="icon-caret-left"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-caret-left" class="icon-caret-left"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-caret-left" class="icon-caret-left"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-caret-left" class="icon-caret-left"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-caret-left" class="icon-caret-left"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-caret-left" class="icon-caret-left"></i></span>
328
+ </div>
329
+ <div class="preview-scale">
330
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
331
+ </div>
332
+ <div class="usage">
333
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-caret-left" />
334
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf119;" />
335
+ </div>
336
+ </div>
337
+
338
+ <div class="glyph">
339
+ <div class="preview-glyphs">
340
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-caret-right" class="icon-caret-right"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-caret-right" class="icon-caret-right"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-caret-right" class="icon-caret-right"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-caret-right" class="icon-caret-right"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-caret-right" class="icon-caret-right"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-caret-right" class="icon-caret-right"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-caret-right" class="icon-caret-right"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-caret-right" class="icon-caret-right"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-caret-right" class="icon-caret-right"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-caret-right" class="icon-caret-right"></i></span>
341
+ </div>
342
+ <div class="preview-scale">
343
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
344
+ </div>
345
+ <div class="usage">
346
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-caret-right" />
347
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11a;" />
348
+ </div>
349
+ </div>
350
+
351
+ <div class="glyph">
352
+ <div class="preview-glyphs">
353
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-caret-up" class="icon-caret-up"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-caret-up" class="icon-caret-up"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-caret-up" class="icon-caret-up"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-caret-up" class="icon-caret-up"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-caret-up" class="icon-caret-up"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-caret-up" class="icon-caret-up"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-caret-up" class="icon-caret-up"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-caret-up" class="icon-caret-up"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-caret-up" class="icon-caret-up"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-caret-up" class="icon-caret-up"></i></span>
354
+ </div>
355
+ <div class="preview-scale">
356
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
357
+ </div>
358
+ <div class="usage">
359
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-caret-up" />
360
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11b;" />
361
+ </div>
362
+ </div>
363
+
364
+ <div class="glyph">
365
+ <div class="preview-glyphs">
366
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-chart-outline" class="icon-chart-outline"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-chart-outline" class="icon-chart-outline"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-chart-outline" class="icon-chart-outline"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-chart-outline" class="icon-chart-outline"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-chart-outline" class="icon-chart-outline"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-chart-outline" class="icon-chart-outline"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-chart-outline" class="icon-chart-outline"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-chart-outline" class="icon-chart-outline"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-chart-outline" class="icon-chart-outline"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-chart-outline" class="icon-chart-outline"></i></span>
367
+ </div>
368
+ <div class="preview-scale">
369
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
370
+ </div>
371
+ <div class="usage">
372
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-chart-outline" />
373
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf109;" />
374
+ </div>
375
+ </div>
376
+
377
+ <div class="glyph">
378
+ <div class="preview-glyphs">
379
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-check" class="icon-check"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-check" class="icon-check"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-check" class="icon-check"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-check" class="icon-check"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-check" class="icon-check"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-check" class="icon-check"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-check" class="icon-check"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-check" class="icon-check"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-check" class="icon-check"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-check" class="icon-check"></i></span>
380
+ </div>
381
+ <div class="preview-scale">
382
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
383
+ </div>
384
+ <div class="usage">
385
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-check" />
386
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10a;" />
387
+ </div>
388
+ </div>
389
+
390
+ <div class="glyph">
391
+ <div class="preview-glyphs">
392
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-chevron-down" class="icon-chevron-down"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-chevron-down" class="icon-chevron-down"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-chevron-down" class="icon-chevron-down"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-chevron-down" class="icon-chevron-down"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-chevron-down" class="icon-chevron-down"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-chevron-down" class="icon-chevron-down"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-chevron-down" class="icon-chevron-down"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-chevron-down" class="icon-chevron-down"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-chevron-down" class="icon-chevron-down"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-chevron-down" class="icon-chevron-down"></i></span>
393
+ </div>
394
+ <div class="preview-scale">
395
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
396
+ </div>
397
+ <div class="usage">
398
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-chevron-down" />
399
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11c;" />
400
+ </div>
401
+ </div>
402
+
403
+ <div class="glyph">
404
+ <div class="preview-glyphs">
405
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-chevron-left" class="icon-chevron-left"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-chevron-left" class="icon-chevron-left"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-chevron-left" class="icon-chevron-left"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-chevron-left" class="icon-chevron-left"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-chevron-left" class="icon-chevron-left"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-chevron-left" class="icon-chevron-left"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-chevron-left" class="icon-chevron-left"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-chevron-left" class="icon-chevron-left"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-chevron-left" class="icon-chevron-left"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-chevron-left" class="icon-chevron-left"></i></span>
406
+ </div>
407
+ <div class="preview-scale">
408
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
409
+ </div>
410
+ <div class="usage">
411
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-chevron-left" />
412
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11d;" />
413
+ </div>
414
+ </div>
415
+
416
+ <div class="glyph">
417
+ <div class="preview-glyphs">
418
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-chevron-right" class="icon-chevron-right"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-chevron-right" class="icon-chevron-right"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-chevron-right" class="icon-chevron-right"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-chevron-right" class="icon-chevron-right"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-chevron-right" class="icon-chevron-right"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-chevron-right" class="icon-chevron-right"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-chevron-right" class="icon-chevron-right"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-chevron-right" class="icon-chevron-right"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-chevron-right" class="icon-chevron-right"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-chevron-right" class="icon-chevron-right"></i></span>
419
+ </div>
420
+ <div class="preview-scale">
421
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
422
+ </div>
423
+ <div class="usage">
424
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-chevron-right" />
425
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11e;" />
426
+ </div>
427
+ </div>
428
+
429
+ <div class="glyph">
430
+ <div class="preview-glyphs">
431
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-chevron-up" class="icon-chevron-up"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-chevron-up" class="icon-chevron-up"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-chevron-up" class="icon-chevron-up"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-chevron-up" class="icon-chevron-up"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-chevron-up" class="icon-chevron-up"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-chevron-up" class="icon-chevron-up"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-chevron-up" class="icon-chevron-up"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-chevron-up" class="icon-chevron-up"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-chevron-up" class="icon-chevron-up"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-chevron-up" class="icon-chevron-up"></i></span>
432
+ </div>
433
+ <div class="preview-scale">
434
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
435
+ </div>
436
+ <div class="usage">
437
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-chevron-up" />
438
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11f;" />
439
+ </div>
440
+ </div>
441
+
442
+ <div class="glyph">
443
+ <div class="preview-glyphs">
444
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-code" class="icon-code"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-code" class="icon-code"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-code" class="icon-code"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-code" class="icon-code"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-code" class="icon-code"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-code" class="icon-code"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-code" class="icon-code"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-code" class="icon-code"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-code" class="icon-code"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-code" class="icon-code"></i></span>
445
+ </div>
446
+ <div class="preview-scale">
447
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
448
+ </div>
449
+ <div class="usage">
450
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-code" />
451
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf125;" />
452
+ </div>
453
+ </div>
454
+
455
+ <div class="glyph">
456
+ <div class="preview-glyphs">
457
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-cog" class="icon-cog"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-cog" class="icon-cog"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-cog" class="icon-cog"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-cog" class="icon-cog"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-cog" class="icon-cog"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-cog" class="icon-cog"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-cog" class="icon-cog"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-cog" class="icon-cog"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-cog" class="icon-cog"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-cog" class="icon-cog"></i></span>
458
+ </div>
459
+ <div class="preview-scale">
460
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
461
+ </div>
462
+ <div class="usage">
463
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-cog" />
464
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf105;" />
465
+ </div>
466
+ </div>
467
+
468
+ <div class="glyph">
469
+ <div class="preview-glyphs">
470
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-cog-outline" class="icon-cog-outline"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-cog-outline" class="icon-cog-outline"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-cog-outline" class="icon-cog-outline"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-cog-outline" class="icon-cog-outline"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-cog-outline" class="icon-cog-outline"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-cog-outline" class="icon-cog-outline"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-cog-outline" class="icon-cog-outline"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-cog-outline" class="icon-cog-outline"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-cog-outline" class="icon-cog-outline"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-cog-outline" class="icon-cog-outline"></i></span>
471
+ </div>
472
+ <div class="preview-scale">
473
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
474
+ </div>
475
+ <div class="usage">
476
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-cog-outline" />
477
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf106;" />
478
+ </div>
479
+ </div>
480
+
481
+ <div class="glyph">
482
+ <div class="preview-glyphs">
483
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-comment" class="icon-comment"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-comment" class="icon-comment"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-comment" class="icon-comment"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-comment" class="icon-comment"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-comment" class="icon-comment"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-comment" class="icon-comment"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-comment" class="icon-comment"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-comment" class="icon-comment"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-comment" class="icon-comment"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-comment" class="icon-comment"></i></span>
484
+ </div>
485
+ <div class="preview-scale">
486
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
487
+ </div>
488
+ <div class="usage">
489
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-comment" />
490
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf103;" />
491
+ </div>
492
+ </div>
493
+
494
+ <div class="glyph">
495
+ <div class="preview-glyphs">
496
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-cross" class="icon-cross"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-cross" class="icon-cross"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-cross" class="icon-cross"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-cross" class="icon-cross"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-cross" class="icon-cross"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-cross" class="icon-cross"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-cross" class="icon-cross"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-cross" class="icon-cross"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-cross" class="icon-cross"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-cross" class="icon-cross"></i></span>
497
+ </div>
498
+ <div class="preview-scale">
499
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
500
+ </div>
501
+ <div class="usage">
502
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-cross" />
503
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf116;" />
504
+ </div>
505
+ </div>
506
+
507
+ <div class="glyph">
508
+ <div class="preview-glyphs">
509
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-document" class="icon-document"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-document" class="icon-document"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-document" class="icon-document"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-document" class="icon-document"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-document" class="icon-document"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-document" class="icon-document"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-document" class="icon-document"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-document" class="icon-document"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-document" class="icon-document"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-document" class="icon-document"></i></span>
510
+ </div>
511
+ <div class="preview-scale">
512
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
513
+ </div>
514
+ <div class="usage">
515
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-document" />
516
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf100;" />
517
+ </div>
518
+ </div>
519
+
520
+ <div class="glyph">
521
+ <div class="preview-glyphs">
522
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-home" class="icon-home"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-home" class="icon-home"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-home" class="icon-home"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-home" class="icon-home"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-home" class="icon-home"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-home" class="icon-home"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-home" class="icon-home"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-home" class="icon-home"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-home" class="icon-home"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-home" class="icon-home"></i></span>
523
+ </div>
524
+ <div class="preview-scale">
525
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
526
+ </div>
527
+ <div class="usage">
528
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-home" />
529
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf102;" />
530
+ </div>
531
+ </div>
532
+
533
+ <div class="glyph">
534
+ <div class="preview-glyphs">
535
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-inbox-outline" class="icon-inbox-outline"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-inbox-outline" class="icon-inbox-outline"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-inbox-outline" class="icon-inbox-outline"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-inbox-outline" class="icon-inbox-outline"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-inbox-outline" class="icon-inbox-outline"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-inbox-outline" class="icon-inbox-outline"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-inbox-outline" class="icon-inbox-outline"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-inbox-outline" class="icon-inbox-outline"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-inbox-outline" class="icon-inbox-outline"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-inbox-outline" class="icon-inbox-outline"></i></span>
536
+ </div>
537
+ <div class="preview-scale">
538
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
539
+ </div>
540
+ <div class="usage">
541
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-inbox-outline" />
542
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf112;" />
543
+ </div>
544
+ </div>
545
+
546
+ <div class="glyph">
547
+ <div class="preview-glyphs">
548
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-italic" class="icon-italic"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-italic" class="icon-italic"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-italic" class="icon-italic"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-italic" class="icon-italic"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-italic" class="icon-italic"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-italic" class="icon-italic"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-italic" class="icon-italic"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-italic" class="icon-italic"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-italic" class="icon-italic"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-italic" class="icon-italic"></i></span>
549
+ </div>
550
+ <div class="preview-scale">
551
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
552
+ </div>
553
+ <div class="usage">
554
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-italic" />
555
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf121;" />
556
+ </div>
557
+ </div>
558
+
559
+ <div class="glyph">
560
+ <div class="preview-glyphs">
561
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-link" class="icon-link"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-link" class="icon-link"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-link" class="icon-link"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-link" class="icon-link"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-link" class="icon-link"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-link" class="icon-link"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-link" class="icon-link"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-link" class="icon-link"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-link" class="icon-link"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-link" class="icon-link"></i></span>
562
+ </div>
563
+ <div class="preview-scale">
564
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
565
+ </div>
566
+ <div class="usage">
567
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-link" />
568
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf124;" />
569
+ </div>
570
+ </div>
571
+
572
+ <div class="glyph">
573
+ <div class="preview-glyphs">
574
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span>
575
+ </div>
576
+ <div class="preview-scale">
577
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
578
+ </div>
579
+ <div class="usage">
580
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-list-ul" />
581
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf123;" />
582
+ </div>
583
+ </div>
584
+
585
+ <div class="glyph">
586
+ <div class="preview-glyphs">
587
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-mail-outline" class="icon-mail-outline"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-mail-outline" class="icon-mail-outline"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-mail-outline" class="icon-mail-outline"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-mail-outline" class="icon-mail-outline"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-mail-outline" class="icon-mail-outline"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-mail-outline" class="icon-mail-outline"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-mail-outline" class="icon-mail-outline"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-mail-outline" class="icon-mail-outline"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-mail-outline" class="icon-mail-outline"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-mail-outline" class="icon-mail-outline"></i></span>
588
+ </div>
589
+ <div class="preview-scale">
590
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
591
+ </div>
592
+ <div class="usage">
593
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-mail-outline" />
594
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf111;" />
595
+ </div>
596
+ </div>
597
+
598
+ <div class="glyph">
599
+ <div class="preview-glyphs">
600
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-media-library" class="icon-media-library"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-media-library" class="icon-media-library"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-media-library" class="icon-media-library"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-media-library" class="icon-media-library"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-media-library" class="icon-media-library"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-media-library" class="icon-media-library"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-media-library" class="icon-media-library"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-media-library" class="icon-media-library"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-media-library" class="icon-media-library"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-media-library" class="icon-media-library"></i></span>
601
+ </div>
602
+ <div class="preview-scale">
603
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
604
+ </div>
605
+ <div class="usage">
606
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-media-library" />
607
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf101;" />
608
+ </div>
609
+ </div>
610
+
611
+ <div class="glyph">
612
+ <div class="preview-glyphs">
613
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-pencil-outline" class="icon-pencil-outline"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-pencil-outline" class="icon-pencil-outline"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-pencil-outline" class="icon-pencil-outline"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-pencil-outline" class="icon-pencil-outline"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-pencil-outline" class="icon-pencil-outline"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-pencil-outline" class="icon-pencil-outline"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-pencil-outline" class="icon-pencil-outline"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-pencil-outline" class="icon-pencil-outline"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-pencil-outline" class="icon-pencil-outline"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-pencil-outline" class="icon-pencil-outline"></i></span>
614
+ </div>
615
+ <div class="preview-scale">
616
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
617
+ </div>
618
+ <div class="usage">
619
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-pencil-outline" />
620
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10d;" />
621
+ </div>
622
+ </div>
623
+
624
+ <div class="glyph">
625
+ <div class="preview-glyphs">
626
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-picture-o" class="icon-picture-o"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-picture-o" class="icon-picture-o"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-picture-o" class="icon-picture-o"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-picture-o" class="icon-picture-o"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-picture-o" class="icon-picture-o"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-picture-o" class="icon-picture-o"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-picture-o" class="icon-picture-o"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-picture-o" class="icon-picture-o"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-picture-o" class="icon-picture-o"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-picture-o" class="icon-picture-o"></i></span>
627
+ </div>
628
+ <div class="preview-scale">
629
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
630
+ </div>
631
+ <div class="usage">
632
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-picture-o" />
633
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf126;" />
634
+ </div>
635
+ </div>
636
+
637
+ <div class="glyph">
638
+ <div class="preview-glyphs">
639
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-plus" class="icon-plus"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-plus" class="icon-plus"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-plus" class="icon-plus"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-plus" class="icon-plus"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-plus" class="icon-plus"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-plus" class="icon-plus"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-plus" class="icon-plus"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-plus" class="icon-plus"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-plus" class="icon-plus"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-plus" class="icon-plus"></i></span>
640
+ </div>
641
+ <div class="preview-scale">
642
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
643
+ </div>
644
+ <div class="usage">
645
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-plus" />
646
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10b;" />
647
+ </div>
648
+ </div>
649
+
650
+ <div class="glyph">
651
+ <div class="preview-glyphs">
652
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-power-off" class="icon-power-off"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-power-off" class="icon-power-off"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-power-off" class="icon-power-off"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-power-off" class="icon-power-off"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-power-off" class="icon-power-off"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-power-off" class="icon-power-off"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-power-off" class="icon-power-off"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-power-off" class="icon-power-off"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-power-off" class="icon-power-off"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-power-off" class="icon-power-off"></i></span>
653
+ </div>
654
+ <div class="preview-scale">
655
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
656
+ </div>
657
+ <div class="usage">
658
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-power-off" />
659
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf104;" />
660
+ </div>
661
+ </div>
662
+
663
+ <div class="glyph">
664
+ <div class="preview-glyphs">
665
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-preview" class="icon-preview"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-preview" class="icon-preview"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-preview" class="icon-preview"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-preview" class="icon-preview"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-preview" class="icon-preview"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-preview" class="icon-preview"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-preview" class="icon-preview"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-preview" class="icon-preview"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-preview" class="icon-preview"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-preview" class="icon-preview"></i></span>
666
+ </div>
667
+ <div class="preview-scale">
668
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
669
+ </div>
670
+ <div class="usage">
671
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-preview" />
672
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10c;" />
673
+ </div>
674
+ </div>
675
+
676
+ <div class="glyph">
677
+ <div class="preview-glyphs">
678
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span>
679
+ </div>
680
+ <div class="preview-scale">
681
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
682
+ </div>
683
+ <div class="usage">
684
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-random" />
685
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10f;" />
686
+ </div>
687
+ </div>
688
+
689
+ <div class="glyph">
690
+ <div class="preview-glyphs">
691
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span>
692
+ </div>
693
+ <div class="preview-scale">
694
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
695
+ </div>
696
+ <div class="usage">
697
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-refresh" />
698
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf114;" />
699
+ </div>
700
+ </div>
701
+
702
+ <div class="glyph">
703
+ <div class="preview-glyphs">
704
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-search" class="icon-search"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-search" class="icon-search"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-search" class="icon-search"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-search" class="icon-search"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-search" class="icon-search"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-search" class="icon-search"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-search" class="icon-search"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-search" class="icon-search"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-search" class="icon-search"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-search" class="icon-search"></i></span>
705
+ </div>
706
+ <div class="preview-scale">
707
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
708
+ </div>
709
+ <div class="usage">
710
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-search" />
711
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf110;" />
712
+ </div>
713
+ </div>
714
+
715
+ <div class="glyph">
716
+ <div class="preview-glyphs">
717
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-social-outline" class="icon-social-outline"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-social-outline" class="icon-social-outline"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-social-outline" class="icon-social-outline"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-social-outline" class="icon-social-outline"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-social-outline" class="icon-social-outline"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-social-outline" class="icon-social-outline"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-social-outline" class="icon-social-outline"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-social-outline" class="icon-social-outline"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-social-outline" class="icon-social-outline"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-social-outline" class="icon-social-outline"></i></span>
718
+ </div>
719
+ <div class="preview-scale">
720
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
721
+ </div>
722
+ <div class="usage">
723
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-social-outline" />
724
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf108;" />
725
+ </div>
726
+ </div>
727
+
728
+ <div class="glyph">
729
+ <div class="preview-glyphs">
730
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span>
731
+ </div>
732
+ <div class="preview-scale">
733
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
734
+ </div>
735
+ <div class="usage">
736
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-trash" />
737
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf117;" />
738
+ </div>
739
+ </div>
740
+
741
+ <div class="glyph">
742
+ <div class="preview-glyphs">
743
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span>
744
+ </div>
745
+ <div class="preview-scale">
746
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
747
+ </div>
748
+ <div class="usage">
749
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-upload-outline" />
750
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf113;" />
751
+ </div>
752
+ </div>
753
+
754
+ <div class="glyph">
755
+ <div class="preview-glyphs">
756
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-users-outline" class="icon-users-outline"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-users-outline" class="icon-users-outline"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-users-outline" class="icon-users-outline"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-users-outline" class="icon-users-outline"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-users-outline" class="icon-users-outline"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-users-outline" class="icon-users-outline"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-users-outline" class="icon-users-outline"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-users-outline" class="icon-users-outline"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-users-outline" class="icon-users-outline"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-users-outline" class="icon-users-outline"></i></span>
757
+ </div>
758
+ <div class="preview-scale">
759
+ <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
760
+ </div>
761
+ <div class="usage">
762
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-users-outline" />
763
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf107;" />
764
+ </div>
765
+ </div>
766
+
767
+
768
+ <footer>
769
+ Made with love using <a href="http://fontcustom.com">Font Custom</a>.
770
+ </footer>
771
+ </div>
772
+ </body>
773
+ </html>