spina 0.10.0 → 0.11.0

Sign up to get free protection for your applications and to get access to all the features.

Potentially problematic release.


This version of spina might be problematic. Click here for more details.

Files changed (183) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +16 -4
  3. data/app/assets/fonts/spina/ics_spina.eot +0 -0
  4. data/app/assets/fonts/spina/ics_spina.svg +356 -0
  5. data/app/assets/fonts/spina/ics_spina.ttf +0 -0
  6. data/app/assets/fonts/spina/ics_spina.woff +0 -0
  7. data/app/assets/icons/spina/barchart.svg +10 -0
  8. data/app/assets/icons/spina/bars.svg +1 -0
  9. data/app/assets/icons/spina/bold.svg +1 -0
  10. data/app/assets/icons/spina/brush.svg +10 -0
  11. data/app/assets/icons/spina/camera.svg +10 -0
  12. data/app/assets/icons/spina/caret-down.svg +1 -0
  13. data/app/assets/icons/spina/caret-left.svg +1 -0
  14. data/app/assets/icons/spina/caret-right.svg +1 -0
  15. data/app/assets/icons/spina/caret-up.svg +1 -0
  16. data/app/assets/icons/spina/cart.svg +10 -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/customer-outline.svg +10 -0
  29. data/app/assets/icons/spina/document.svg +10 -0
  30. data/app/assets/icons/spina/dots.svg +10 -0
  31. data/app/assets/icons/spina/exclamation.svg +13 -0
  32. data/app/assets/icons/spina/eye.svg +1 -0
  33. data/app/assets/icons/spina/filter.svg +10 -0
  34. data/app/assets/icons/spina/home.svg +1 -0
  35. data/app/assets/icons/spina/image.svg +10 -0
  36. data/app/assets/icons/spina/inbox-outline.svg +10 -0
  37. data/app/assets/icons/spina/info.svg +13 -0
  38. data/app/assets/icons/spina/italic.svg +1 -0
  39. data/app/assets/icons/spina/large-check.svg +10 -0
  40. data/app/assets/icons/spina/link.svg +1 -0
  41. data/app/assets/icons/spina/list-ul.svg +1 -0
  42. data/app/assets/icons/spina/mail-outline.svg +10 -0
  43. data/app/assets/icons/spina/mail.svg +10 -0
  44. data/app/assets/icons/spina/media-library.svg +10 -0
  45. data/app/assets/icons/spina/megaphone.svg +10 -0
  46. data/app/assets/icons/spina/min.svg +14 -0
  47. data/app/assets/icons/spina/pages.svg +10 -0
  48. data/app/assets/icons/spina/pencil-outline.svg +10 -0
  49. data/app/assets/icons/spina/pencil.svg +16 -0
  50. data/app/assets/icons/spina/picture-o.svg +1 -0
  51. data/app/assets/icons/spina/plus.svg +10 -0
  52. data/app/assets/icons/spina/power-off.svg +10 -0
  53. data/app/assets/icons/spina/preview/icons_spina-preview.html +1043 -0
  54. data/app/assets/icons/spina/preview/ics_spina-preview.html +1043 -0
  55. data/app/assets/icons/spina/preview.svg +10 -0
  56. data/app/assets/icons/spina/product-outline.svg +10 -0
  57. data/app/assets/icons/spina/random.svg +10 -0
  58. data/app/assets/icons/spina/refresh.svg +13 -0
  59. data/app/assets/icons/spina/search.svg +10 -0
  60. data/app/assets/icons/spina/shop.svg +12 -0
  61. data/app/assets/icons/spina/social-outline.svg +10 -0
  62. data/app/assets/icons/spina/trash.svg +10 -0
  63. data/app/assets/icons/spina/upload-outline.svg +14 -0
  64. data/app/assets/icons/spina/users-outline.svg +10 -0
  65. data/app/assets/images/spina/arrow-left.png +0 -0
  66. data/app/assets/images/spina/arrow-right.png +0 -0
  67. data/app/assets/images/spina/danger-zone-ribbon.png +0 -0
  68. data/app/assets/images/spina/datepicker.png +0 -0
  69. data/app/assets/images/spina/divider.png +0 -0
  70. data/app/assets/images/spina/marker.png +0 -0
  71. data/app/assets/images/spina/mask.png +0 -0
  72. data/app/assets/images/spina/spina.png +0 -0
  73. data/app/assets/images/spina/spina_small.png +0 -0
  74. data/app/assets/images/spina/wheel.png +0 -0
  75. data/app/assets/javascripts/spina/admin/{account.js.coffee → account.coffee} +0 -0
  76. data/app/assets/javascripts/spina/admin/application.coffee.erb +152 -0
  77. data/app/assets/javascripts/spina/admin/{confirm_delete.js.coffee.erb → confirm_delete.coffee.erb} +0 -0
  78. data/app/assets/javascripts/spina/admin/dropdown.coffee +75 -0
  79. data/app/assets/javascripts/spina/admin/forms.coffee +7 -0
  80. data/app/assets/javascripts/spina/admin/galleryselect.coffee +20 -0
  81. data/app/assets/javascripts/spina/admin/{spina.infinite_scroll.coffee → infinite_scroll.coffee} +1 -0
  82. data/app/assets/javascripts/spina/admin/modal.coffee +54 -0
  83. data/app/assets/javascripts/spina/admin/navigation.coffee +38 -0
  84. data/app/assets/javascripts/spina/admin/notifications.coffee +7 -0
  85. data/app/assets/javascripts/spina/admin/{pages.js.coffee.erb → pages.coffee.erb} +11 -2
  86. data/app/assets/javascripts/spina/admin/switch.coffee +43 -0
  87. data/app/assets/javascripts/spina/admin/tabs.coffee +13 -0
  88. data/app/assets/javascripts/spina/admin/{spina.trix.js.coffee.erb → trix.coffee.erb} +26 -25
  89. data/app/assets/javascripts/spina/admin/uploads.coffee +35 -0
  90. data/app/assets/stylesheets/spina/_admin_editing.sass +25 -0
  91. data/app/assets/stylesheets/spina/_buttons.sass +367 -0
  92. data/app/assets/stylesheets/spina/_cards.sass +54 -0
  93. data/app/assets/stylesheets/spina/_configuration.sass +15 -0
  94. data/app/assets/stylesheets/spina/_custom_animations.sass +61 -0
  95. data/app/assets/stylesheets/spina/_farbtastic.sass +37 -0
  96. data/app/assets/stylesheets/spina/_fonts.sass +18 -0
  97. data/app/assets/stylesheets/spina/_forms.sass +806 -0
  98. data/app/assets/stylesheets/spina/_gallery.sass +249 -0
  99. data/app/assets/stylesheets/spina/_ics_spina.scss +60 -0
  100. data/app/assets/stylesheets/spina/_labels.sass +30 -0
  101. data/app/assets/stylesheets/spina/_login.sass +46 -0
  102. data/app/assets/stylesheets/spina/_modal.sass +162 -0
  103. data/app/assets/stylesheets/spina/_notifications.sass +62 -0
  104. data/app/assets/stylesheets/spina/_sortable_lists.sass +177 -0
  105. data/app/assets/stylesheets/spina/_tables.sass +301 -0
  106. data/app/assets/stylesheets/spina/_trix.sass +99 -0
  107. data/app/assets/stylesheets/spina/_wizard.sass +122 -0
  108. data/app/assets/stylesheets/spina/_wysihtml5.sass +79 -0
  109. data/app/assets/stylesheets/spina/application.sass +0 -1
  110. data/app/assets/stylesheets/spina/wysihtml5_textarea.sass +14 -0
  111. data/app/assets/stylesheets/spina.sass +564 -0
  112. data/app/controllers/concerns/spina/frontend.rb +59 -0
  113. data/app/controllers/spina/admin/navigations_controller.rb +60 -0
  114. data/app/controllers/spina/admin/pages_controller.rb +7 -6
  115. data/app/controllers/spina/admin/photos_controller.rb +18 -7
  116. data/app/controllers/spina/application_controller.rb +2 -2
  117. data/app/controllers/spina/pages_controller.rb +4 -49
  118. data/app/helpers/spina/admin/pages_helper.rb +12 -7
  119. data/app/helpers/spina/application_helper.rb +0 -29
  120. data/app/models/concerns/spina/part.rb +1 -1
  121. data/app/models/spina/navigation.rb +11 -0
  122. data/app/models/spina/navigation_item.rb +17 -0
  123. data/app/models/spina/page.rb +11 -0
  124. data/app/models/spina/page_part.rb +1 -1
  125. data/app/models/spina/photo_collection.rb +6 -1
  126. data/app/models/spina/structure.rb +4 -0
  127. data/app/models/spina/structure_item.rb +5 -1
  128. data/app/models/spina/structure_part.rb +16 -3
  129. data/app/views/layouts/spina/admin/admin.html.haml +8 -1
  130. data/app/views/layouts/spina/admin/pages.html.haml +30 -0
  131. data/app/views/spina/admin/accounts/_form.html.haml +1 -1
  132. data/app/views/spina/admin/accounts/analytics.html.haml +1 -1
  133. data/app/views/spina/admin/accounts/social.html.haml +1 -1
  134. data/app/views/spina/admin/accounts/style.html.haml +1 -1
  135. data/app/views/spina/admin/navigations/_navigation_item_nested_list.html.haml +7 -0
  136. data/app/views/spina/admin/navigations/_page.html.haml +8 -0
  137. data/app/views/spina/admin/navigations/edit.html.haml +22 -0
  138. data/app/views/spina/admin/navigations/show.html.haml +7 -0
  139. data/app/views/spina/admin/page_partables/attachment_collections/_form.html.haml +1 -1
  140. data/app/views/spina/admin/page_partables/attachments/_form.html.haml +1 -1
  141. data/app/views/spina/admin/page_partables/photo_collections/_form.html.haml +1 -1
  142. data/app/views/spina/admin/page_partables/photos/_form.html.haml +1 -1
  143. data/app/views/spina/admin/page_partables/structures/_form.html.haml +1 -1
  144. data/app/views/spina/admin/pages/_form.html.haml +12 -5
  145. data/app/views/spina/admin/pages/_page.html.haml +12 -18
  146. data/app/views/spina/admin/pages/_page_nested_list.html.haml +7 -0
  147. data/app/views/spina/admin/pages/create.js.coffee +0 -0
  148. data/app/views/spina/admin/pages/index.html.haml +24 -42
  149. data/app/views/spina/admin/pages/update.js.coffee +1 -3
  150. data/app/views/spina/admin/photos/_photo.html.haml +2 -0
  151. data/app/views/spina/admin/photos/_photo_collection_select.html.haml +1 -1
  152. data/app/views/spina/admin/photos/_photo_select.html.haml +2 -2
  153. data/app/views/spina/admin/photos/_wysihtml5_select.html.haml +1 -1
  154. data/app/views/spina/admin/photos/create_multiple.js.erb +4 -0
  155. data/app/views/spina/admin/photos/index.html.haml +1 -1
  156. data/app/views/spina/admin/photos/single_picker_infinite_scroll.js.erb +1 -1
  157. data/app/views/spina/admin/sessions/new.html.haml +8 -5
  158. data/app/views/spina/admin/shared/_notifications.html.haml +3 -1
  159. data/app/views/spina/admin/shared/_primary_navigation.html.haml +4 -3
  160. data/app/views/spina/admin/shared/_rich_text_field.html.haml +16 -16
  161. data/app/views/spina/admin/structure_items/_fields.html.haml +7 -8
  162. data/app/views/spina/admin/structure_partables/photo_collections/_form.html.haml +14 -0
  163. data/app/views/spina/admin/structure_partables/photos/_form.html.haml +1 -1
  164. data/app/views/spina/shared/_google_site_verification.html.haml +1 -0
  165. data/config/fontcustom.yml +95 -0
  166. data/config/locales/en.yml +11 -0
  167. data/config/locales/nl.yml +13 -3
  168. data/config/locales/pt-BR.yml +11 -1
  169. data/config/routes.rb +14 -8
  170. data/db/migrate/1_create_spina_tables.rb +0 -7
  171. data/db/migrate/2_create_spina_translation_tables.rb +26 -7
  172. data/db/migrate/3_create_spina_navigations.rb +21 -0
  173. data/lib/generators/spina/templates/config/initializers/carrierwave.rb +1 -1
  174. data/lib/spina/engine.rb +1 -2
  175. data/lib/spina/fontcustom/_ics_spina.scss +5 -0
  176. data/lib/spina/version.rb +1 -1
  177. data/lib/spina.rb +3 -1
  178. metadata +146 -45
  179. data/app/assets/images/spina/admin/logo@2x.png +0 -0
  180. data/app/assets/javascripts/spina/admin/application.js +0 -10
  181. data/app/assets/javascripts/spina/admin/spina.scaffold.coffee +0 -15
  182. data/app/assets/javascripts/spina/application.js +0 -15
  183. data/app/assets/stylesheets/spina/_mixins.scss +0 -34
@@ -0,0 +1,1043 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>ics_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: ics_spina */
141
+
142
+ @font-face {
143
+ font-family: "ics_spina";
144
+ src: url("../../../fonts/spina/ics_spina.eot");
145
+ src: url("../../../fonts/spina/ics_spina.eot?#iefix") format("embedded-opentype"),
146
+ url("../../../fonts/spina/ics_spina.woff") format("woff"),
147
+ url("../../../fonts/spina/ics_spina.ttf") format("truetype"),
148
+ url("../../../fonts/spina/ics_spina.svg#ics_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: "ics_spina";
156
+ src: url("../../../fonts/spina/ics_spina.svg#ics_spina") format("svg");
157
+ }
158
+ }
159
+
160
+ [data-icon]:before { content: attr(data-icon); }
161
+
162
+ [data-icon]:before,
163
+ .icon-barchart:before,
164
+ .icon-bars:before,
165
+ .icon-bold:before,
166
+ .icon-brush:before,
167
+ .icon-camera:before,
168
+ .icon-caret-down:before,
169
+ .icon-caret-left:before,
170
+ .icon-caret-right:before,
171
+ .icon-caret-up:before,
172
+ .icon-cart:before,
173
+ .icon-chart-outline:before,
174
+ .icon-check:before,
175
+ .icon-chevron-down:before,
176
+ .icon-chevron-left:before,
177
+ .icon-chevron-right:before,
178
+ .icon-chevron-up:before,
179
+ .icon-code:before,
180
+ .icon-cog:before,
181
+ .icon-cog-outline:before,
182
+ .icon-comment:before,
183
+ .icon-cross:before,
184
+ .icon-customer-outline:before,
185
+ .icon-document:before,
186
+ .icon-dots:before,
187
+ .icon-exclamation:before,
188
+ .icon-eye:before,
189
+ .icon-filter:before,
190
+ .icon-home:before,
191
+ .icon-image:before,
192
+ .icon-inbox-outline:before,
193
+ .icon-info:before,
194
+ .icon-italic:before,
195
+ .icon-large-check:before,
196
+ .icon-link:before,
197
+ .icon-list-ul:before,
198
+ .icon-mail:before,
199
+ .icon-mail-outline:before,
200
+ .icon-media-library:before,
201
+ .icon-megaphone:before,
202
+ .icon-min:before,
203
+ .icon-pages:before,
204
+ .icon-pencil:before,
205
+ .icon-pencil-outline:before,
206
+ .icon-picture-o:before,
207
+ .icon-plus:before,
208
+ .icon-power-off:before,
209
+ .icon-preview:before,
210
+ .icon-product-outline:before,
211
+ .icon-random:before,
212
+ .icon-refresh:before,
213
+ .icon-search:before,
214
+ .icon-shop:before,
215
+ .icon-social-outline:before,
216
+ .icon-trash:before,
217
+ .icon-upload-outline:before,
218
+ .icon-users-outline:before {
219
+ display: inline-block;
220
+ font-family: "ics_spina";
221
+ font-style: normal;
222
+ font-weight: normal;
223
+ font-variant: normal;
224
+ line-height: 1;
225
+ text-decoration: inherit;
226
+ text-rendering: optimizeLegibility;
227
+ text-transform: none;
228
+ -moz-osx-font-smoothing: grayscale;
229
+ -webkit-font-smoothing: antialiased;
230
+ font-smoothing: antialiased;
231
+ }
232
+
233
+ .icon-barchart:before { content: "\f100"; }
234
+ .icon-bars:before { content: "\f101"; }
235
+ .icon-bold:before { content: "\f102"; }
236
+ .icon-brush:before { content: "\f103"; }
237
+ .icon-camera:before { content: "\f104"; }
238
+ .icon-caret-down:before { content: "\f105"; }
239
+ .icon-caret-left:before { content: "\f106"; }
240
+ .icon-caret-right:before { content: "\f107"; }
241
+ .icon-caret-up:before { content: "\f108"; }
242
+ .icon-cart:before { content: "\f109"; }
243
+ .icon-chart-outline:before { content: "\f10a"; }
244
+ .icon-check:before { content: "\f10b"; }
245
+ .icon-chevron-down:before { content: "\f10c"; }
246
+ .icon-chevron-left:before { content: "\f10d"; }
247
+ .icon-chevron-right:before { content: "\f10e"; }
248
+ .icon-chevron-up:before { content: "\f10f"; }
249
+ .icon-code:before { content: "\f110"; }
250
+ .icon-cog:before { content: "\f111"; }
251
+ .icon-cog-outline:before { content: "\f112"; }
252
+ .icon-comment:before { content: "\f113"; }
253
+ .icon-cross:before { content: "\f114"; }
254
+ .icon-customer-outline:before { content: "\f115"; }
255
+ .icon-document:before { content: "\f116"; }
256
+ .icon-dots:before { content: "\f117"; }
257
+ .icon-exclamation:before { content: "\f118"; }
258
+ .icon-eye:before { content: "\f119"; }
259
+ .icon-filter:before { content: "\f11a"; }
260
+ .icon-home:before { content: "\f11b"; }
261
+ .icon-image:before { content: "\f11c"; }
262
+ .icon-inbox-outline:before { content: "\f11d"; }
263
+ .icon-info:before { content: "\f11e"; }
264
+ .icon-italic:before { content: "\f11f"; }
265
+ .icon-large-check:before { content: "\f120"; }
266
+ .icon-link:before { content: "\f121"; }
267
+ .icon-list-ul:before { content: "\f122"; }
268
+ .icon-mail:before { content: "\f123"; }
269
+ .icon-mail-outline:before { content: "\f124"; }
270
+ .icon-media-library:before { content: "\f125"; }
271
+ .icon-megaphone:before { content: "\f126"; }
272
+ .icon-min:before { content: "\f127"; }
273
+ .icon-pages:before { content: "\f128"; }
274
+ .icon-pencil:before { content: "\f129"; }
275
+ .icon-pencil-outline:before { content: "\f12a"; }
276
+ .icon-picture-o:before { content: "\f12b"; }
277
+ .icon-plus:before { content: "\f12c"; }
278
+ .icon-power-off:before { content: "\f12d"; }
279
+ .icon-preview:before { content: "\f12e"; }
280
+ .icon-product-outline:before { content: "\f12f"; }
281
+ .icon-random:before { content: "\f130"; }
282
+ .icon-refresh:before { content: "\f131"; }
283
+ .icon-search:before { content: "\f132"; }
284
+ .icon-shop:before { content: "\f133"; }
285
+ .icon-social-outline:before { content: "\f134"; }
286
+ .icon-trash:before { content: "\f135"; }
287
+ .icon-upload-outline:before { content: "\f136"; }
288
+ .icon-users-outline:before { content: "\f137"; }
289
+ </style>
290
+
291
+ <!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
292
+
293
+ <script>
294
+ function toggleCharacters() {
295
+ var body = document.getElementsByTagName('body')[0];
296
+ body.className = body.className === 'characters-off' ? '' : 'characters-off';
297
+ }
298
+ </script>
299
+ </head>
300
+
301
+ <body class="characters-off">
302
+ <div id="page" class="container">
303
+ <header>
304
+ <h1>ics_spina contains 56 glyphs:</h1>
305
+ <a onclick="toggleCharacters(); return false;" href="#">Toggle Preview Characters</a>
306
+ </header>
307
+
308
+
309
+ <div class="glyph">
310
+ <div class="preview-glyphs">
311
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-barchart" class="icon-barchart"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-barchart" class="icon-barchart"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-barchart" class="icon-barchart"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-barchart" class="icon-barchart"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-barchart" class="icon-barchart"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-barchart" class="icon-barchart"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-barchart" class="icon-barchart"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-barchart" class="icon-barchart"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-barchart" class="icon-barchart"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-barchart" class="icon-barchart"></i></span>
312
+ </div>
313
+ <div class="preview-scale">
314
+ <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>
315
+ </div>
316
+ <div class="usage">
317
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-barchart" />
318
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf100;" />
319
+ </div>
320
+ </div>
321
+
322
+ <div class="glyph">
323
+ <div class="preview-glyphs">
324
+ <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>
325
+ </div>
326
+ <div class="preview-scale">
327
+ <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>
328
+ </div>
329
+ <div class="usage">
330
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-bars" />
331
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf101;" />
332
+ </div>
333
+ </div>
334
+
335
+ <div class="glyph">
336
+ <div class="preview-glyphs">
337
+ <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>
338
+ </div>
339
+ <div class="preview-scale">
340
+ <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>
341
+ </div>
342
+ <div class="usage">
343
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-bold" />
344
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf102;" />
345
+ </div>
346
+ </div>
347
+
348
+ <div class="glyph">
349
+ <div class="preview-glyphs">
350
+ <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>
351
+ </div>
352
+ <div class="preview-scale">
353
+ <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>
354
+ </div>
355
+ <div class="usage">
356
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-brush" />
357
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf103;" />
358
+ </div>
359
+ </div>
360
+
361
+ <div class="glyph">
362
+ <div class="preview-glyphs">
363
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-camera" class="icon-camera"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-camera" class="icon-camera"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-camera" class="icon-camera"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-camera" class="icon-camera"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-camera" class="icon-camera"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-camera" class="icon-camera"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-camera" class="icon-camera"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-camera" class="icon-camera"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-camera" class="icon-camera"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-camera" class="icon-camera"></i></span>
364
+ </div>
365
+ <div class="preview-scale">
366
+ <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>
367
+ </div>
368
+ <div class="usage">
369
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-camera" />
370
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf104;" />
371
+ </div>
372
+ </div>
373
+
374
+ <div class="glyph">
375
+ <div class="preview-glyphs">
376
+ <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>
377
+ </div>
378
+ <div class="preview-scale">
379
+ <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>
380
+ </div>
381
+ <div class="usage">
382
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-caret-down" />
383
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf105;" />
384
+ </div>
385
+ </div>
386
+
387
+ <div class="glyph">
388
+ <div class="preview-glyphs">
389
+ <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>
390
+ </div>
391
+ <div class="preview-scale">
392
+ <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>
393
+ </div>
394
+ <div class="usage">
395
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-caret-left" />
396
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf106;" />
397
+ </div>
398
+ </div>
399
+
400
+ <div class="glyph">
401
+ <div class="preview-glyphs">
402
+ <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>
403
+ </div>
404
+ <div class="preview-scale">
405
+ <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>
406
+ </div>
407
+ <div class="usage">
408
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-caret-right" />
409
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf107;" />
410
+ </div>
411
+ </div>
412
+
413
+ <div class="glyph">
414
+ <div class="preview-glyphs">
415
+ <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>
416
+ </div>
417
+ <div class="preview-scale">
418
+ <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>
419
+ </div>
420
+ <div class="usage">
421
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-caret-up" />
422
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf108;" />
423
+ </div>
424
+ </div>
425
+
426
+ <div class="glyph">
427
+ <div class="preview-glyphs">
428
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-cart" class="icon-cart"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-cart" class="icon-cart"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-cart" class="icon-cart"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-cart" class="icon-cart"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-cart" class="icon-cart"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-cart" class="icon-cart"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-cart" class="icon-cart"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-cart" class="icon-cart"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-cart" class="icon-cart"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-cart" class="icon-cart"></i></span>
429
+ </div>
430
+ <div class="preview-scale">
431
+ <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>
432
+ </div>
433
+ <div class="usage">
434
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-cart" />
435
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf109;" />
436
+ </div>
437
+ </div>
438
+
439
+ <div class="glyph">
440
+ <div class="preview-glyphs">
441
+ <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>
442
+ </div>
443
+ <div class="preview-scale">
444
+ <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>
445
+ </div>
446
+ <div class="usage">
447
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-chart-outline" />
448
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10a;" />
449
+ </div>
450
+ </div>
451
+
452
+ <div class="glyph">
453
+ <div class="preview-glyphs">
454
+ <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>
455
+ </div>
456
+ <div class="preview-scale">
457
+ <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>
458
+ </div>
459
+ <div class="usage">
460
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-check" />
461
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10b;" />
462
+ </div>
463
+ </div>
464
+
465
+ <div class="glyph">
466
+ <div class="preview-glyphs">
467
+ <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>
468
+ </div>
469
+ <div class="preview-scale">
470
+ <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>
471
+ </div>
472
+ <div class="usage">
473
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-chevron-down" />
474
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10c;" />
475
+ </div>
476
+ </div>
477
+
478
+ <div class="glyph">
479
+ <div class="preview-glyphs">
480
+ <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>
481
+ </div>
482
+ <div class="preview-scale">
483
+ <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>
484
+ </div>
485
+ <div class="usage">
486
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-chevron-left" />
487
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10d;" />
488
+ </div>
489
+ </div>
490
+
491
+ <div class="glyph">
492
+ <div class="preview-glyphs">
493
+ <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>
494
+ </div>
495
+ <div class="preview-scale">
496
+ <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>
497
+ </div>
498
+ <div class="usage">
499
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-chevron-right" />
500
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10e;" />
501
+ </div>
502
+ </div>
503
+
504
+ <div class="glyph">
505
+ <div class="preview-glyphs">
506
+ <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>
507
+ </div>
508
+ <div class="preview-scale">
509
+ <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>
510
+ </div>
511
+ <div class="usage">
512
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-chevron-up" />
513
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10f;" />
514
+ </div>
515
+ </div>
516
+
517
+ <div class="glyph">
518
+ <div class="preview-glyphs">
519
+ <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>
520
+ </div>
521
+ <div class="preview-scale">
522
+ <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>
523
+ </div>
524
+ <div class="usage">
525
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-code" />
526
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf110;" />
527
+ </div>
528
+ </div>
529
+
530
+ <div class="glyph">
531
+ <div class="preview-glyphs">
532
+ <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>
533
+ </div>
534
+ <div class="preview-scale">
535
+ <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>
536
+ </div>
537
+ <div class="usage">
538
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-cog" />
539
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf111;" />
540
+ </div>
541
+ </div>
542
+
543
+ <div class="glyph">
544
+ <div class="preview-glyphs">
545
+ <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>
546
+ </div>
547
+ <div class="preview-scale">
548
+ <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>
549
+ </div>
550
+ <div class="usage">
551
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-cog-outline" />
552
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf112;" />
553
+ </div>
554
+ </div>
555
+
556
+ <div class="glyph">
557
+ <div class="preview-glyphs">
558
+ <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>
559
+ </div>
560
+ <div class="preview-scale">
561
+ <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>
562
+ </div>
563
+ <div class="usage">
564
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-comment" />
565
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf113;" />
566
+ </div>
567
+ </div>
568
+
569
+ <div class="glyph">
570
+ <div class="preview-glyphs">
571
+ <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>
572
+ </div>
573
+ <div class="preview-scale">
574
+ <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>
575
+ </div>
576
+ <div class="usage">
577
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-cross" />
578
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf114;" />
579
+ </div>
580
+ </div>
581
+
582
+ <div class="glyph">
583
+ <div class="preview-glyphs">
584
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-customer-outline" class="icon-customer-outline"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-customer-outline" class="icon-customer-outline"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-customer-outline" class="icon-customer-outline"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-customer-outline" class="icon-customer-outline"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-customer-outline" class="icon-customer-outline"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-customer-outline" class="icon-customer-outline"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-customer-outline" class="icon-customer-outline"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-customer-outline" class="icon-customer-outline"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-customer-outline" class="icon-customer-outline"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-customer-outline" class="icon-customer-outline"></i></span>
585
+ </div>
586
+ <div class="preview-scale">
587
+ <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>
588
+ </div>
589
+ <div class="usage">
590
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-customer-outline" />
591
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf115;" />
592
+ </div>
593
+ </div>
594
+
595
+ <div class="glyph">
596
+ <div class="preview-glyphs">
597
+ <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>
598
+ </div>
599
+ <div class="preview-scale">
600
+ <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>
601
+ </div>
602
+ <div class="usage">
603
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-document" />
604
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf116;" />
605
+ </div>
606
+ </div>
607
+
608
+ <div class="glyph">
609
+ <div class="preview-glyphs">
610
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-dots" class="icon-dots"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-dots" class="icon-dots"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-dots" class="icon-dots"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-dots" class="icon-dots"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-dots" class="icon-dots"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-dots" class="icon-dots"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-dots" class="icon-dots"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-dots" class="icon-dots"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-dots" class="icon-dots"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-dots" class="icon-dots"></i></span>
611
+ </div>
612
+ <div class="preview-scale">
613
+ <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>
614
+ </div>
615
+ <div class="usage">
616
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-dots" />
617
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf117;" />
618
+ </div>
619
+ </div>
620
+
621
+ <div class="glyph">
622
+ <div class="preview-glyphs">
623
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-exclamation" class="icon-exclamation"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-exclamation" class="icon-exclamation"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-exclamation" class="icon-exclamation"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-exclamation" class="icon-exclamation"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-exclamation" class="icon-exclamation"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-exclamation" class="icon-exclamation"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-exclamation" class="icon-exclamation"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-exclamation" class="icon-exclamation"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-exclamation" class="icon-exclamation"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-exclamation" class="icon-exclamation"></i></span>
624
+ </div>
625
+ <div class="preview-scale">
626
+ <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>
627
+ </div>
628
+ <div class="usage">
629
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-exclamation" />
630
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf118;" />
631
+ </div>
632
+ </div>
633
+
634
+ <div class="glyph">
635
+ <div class="preview-glyphs">
636
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span>
637
+ </div>
638
+ <div class="preview-scale">
639
+ <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>
640
+ </div>
641
+ <div class="usage">
642
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-eye" />
643
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf119;" />
644
+ </div>
645
+ </div>
646
+
647
+ <div class="glyph">
648
+ <div class="preview-glyphs">
649
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-filter" class="icon-filter"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-filter" class="icon-filter"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-filter" class="icon-filter"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-filter" class="icon-filter"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-filter" class="icon-filter"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-filter" class="icon-filter"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-filter" class="icon-filter"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-filter" class="icon-filter"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-filter" class="icon-filter"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-filter" class="icon-filter"></i></span>
650
+ </div>
651
+ <div class="preview-scale">
652
+ <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>
653
+ </div>
654
+ <div class="usage">
655
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-filter" />
656
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11a;" />
657
+ </div>
658
+ </div>
659
+
660
+ <div class="glyph">
661
+ <div class="preview-glyphs">
662
+ <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>
663
+ </div>
664
+ <div class="preview-scale">
665
+ <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>
666
+ </div>
667
+ <div class="usage">
668
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-home" />
669
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11b;" />
670
+ </div>
671
+ </div>
672
+
673
+ <div class="glyph">
674
+ <div class="preview-glyphs">
675
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-image" class="icon-image"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-image" class="icon-image"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-image" class="icon-image"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-image" class="icon-image"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-image" class="icon-image"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-image" class="icon-image"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-image" class="icon-image"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-image" class="icon-image"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-image" class="icon-image"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-image" class="icon-image"></i></span>
676
+ </div>
677
+ <div class="preview-scale">
678
+ <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>
679
+ </div>
680
+ <div class="usage">
681
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-image" />
682
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11c;" />
683
+ </div>
684
+ </div>
685
+
686
+ <div class="glyph">
687
+ <div class="preview-glyphs">
688
+ <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>
689
+ </div>
690
+ <div class="preview-scale">
691
+ <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>
692
+ </div>
693
+ <div class="usage">
694
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-inbox-outline" />
695
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11d;" />
696
+ </div>
697
+ </div>
698
+
699
+ <div class="glyph">
700
+ <div class="preview-glyphs">
701
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span>
702
+ </div>
703
+ <div class="preview-scale">
704
+ <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>
705
+ </div>
706
+ <div class="usage">
707
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-info" />
708
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11e;" />
709
+ </div>
710
+ </div>
711
+
712
+ <div class="glyph">
713
+ <div class="preview-glyphs">
714
+ <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>
715
+ </div>
716
+ <div class="preview-scale">
717
+ <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>
718
+ </div>
719
+ <div class="usage">
720
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-italic" />
721
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11f;" />
722
+ </div>
723
+ </div>
724
+
725
+ <div class="glyph">
726
+ <div class="preview-glyphs">
727
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-large-check" class="icon-large-check"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-large-check" class="icon-large-check"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-large-check" class="icon-large-check"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-large-check" class="icon-large-check"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-large-check" class="icon-large-check"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-large-check" class="icon-large-check"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-large-check" class="icon-large-check"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-large-check" class="icon-large-check"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-large-check" class="icon-large-check"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-large-check" class="icon-large-check"></i></span>
728
+ </div>
729
+ <div class="preview-scale">
730
+ <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>
731
+ </div>
732
+ <div class="usage">
733
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-large-check" />
734
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf120;" />
735
+ </div>
736
+ </div>
737
+
738
+ <div class="glyph">
739
+ <div class="preview-glyphs">
740
+ <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>
741
+ </div>
742
+ <div class="preview-scale">
743
+ <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>
744
+ </div>
745
+ <div class="usage">
746
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-link" />
747
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf121;" />
748
+ </div>
749
+ </div>
750
+
751
+ <div class="glyph">
752
+ <div class="preview-glyphs">
753
+ <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>
754
+ </div>
755
+ <div class="preview-scale">
756
+ <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>
757
+ </div>
758
+ <div class="usage">
759
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-list-ul" />
760
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf122;" />
761
+ </div>
762
+ </div>
763
+
764
+ <div class="glyph">
765
+ <div class="preview-glyphs">
766
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-mail" class="icon-mail"></i></span>
767
+ </div>
768
+ <div class="preview-scale">
769
+ <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>
770
+ </div>
771
+ <div class="usage">
772
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-mail" />
773
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf123;" />
774
+ </div>
775
+ </div>
776
+
777
+ <div class="glyph">
778
+ <div class="preview-glyphs">
779
+ <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>
780
+ </div>
781
+ <div class="preview-scale">
782
+ <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>
783
+ </div>
784
+ <div class="usage">
785
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-mail-outline" />
786
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf124;" />
787
+ </div>
788
+ </div>
789
+
790
+ <div class="glyph">
791
+ <div class="preview-glyphs">
792
+ <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>
793
+ </div>
794
+ <div class="preview-scale">
795
+ <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>
796
+ </div>
797
+ <div class="usage">
798
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-media-library" />
799
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf125;" />
800
+ </div>
801
+ </div>
802
+
803
+ <div class="glyph">
804
+ <div class="preview-glyphs">
805
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-megaphone" class="icon-megaphone"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-megaphone" class="icon-megaphone"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-megaphone" class="icon-megaphone"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-megaphone" class="icon-megaphone"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-megaphone" class="icon-megaphone"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-megaphone" class="icon-megaphone"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-megaphone" class="icon-megaphone"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-megaphone" class="icon-megaphone"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-megaphone" class="icon-megaphone"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-megaphone" class="icon-megaphone"></i></span>
806
+ </div>
807
+ <div class="preview-scale">
808
+ <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>
809
+ </div>
810
+ <div class="usage">
811
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-megaphone" />
812
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf126;" />
813
+ </div>
814
+ </div>
815
+
816
+ <div class="glyph">
817
+ <div class="preview-glyphs">
818
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-min" class="icon-min"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-min" class="icon-min"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-min" class="icon-min"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-min" class="icon-min"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-min" class="icon-min"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-min" class="icon-min"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-min" class="icon-min"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-min" class="icon-min"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-min" class="icon-min"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-min" class="icon-min"></i></span>
819
+ </div>
820
+ <div class="preview-scale">
821
+ <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>
822
+ </div>
823
+ <div class="usage">
824
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-min" />
825
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf127;" />
826
+ </div>
827
+ </div>
828
+
829
+ <div class="glyph">
830
+ <div class="preview-glyphs">
831
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span>
832
+ </div>
833
+ <div class="preview-scale">
834
+ <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>
835
+ </div>
836
+ <div class="usage">
837
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-pages" />
838
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf128;" />
839
+ </div>
840
+ </div>
841
+
842
+ <div class="glyph">
843
+ <div class="preview-glyphs">
844
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-pencil" class="icon-pencil"></i></span>
845
+ </div>
846
+ <div class="preview-scale">
847
+ <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>
848
+ </div>
849
+ <div class="usage">
850
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-pencil" />
851
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf129;" />
852
+ </div>
853
+ </div>
854
+
855
+ <div class="glyph">
856
+ <div class="preview-glyphs">
857
+ <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>
858
+ </div>
859
+ <div class="preview-scale">
860
+ <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>
861
+ </div>
862
+ <div class="usage">
863
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-pencil-outline" />
864
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12a;" />
865
+ </div>
866
+ </div>
867
+
868
+ <div class="glyph">
869
+ <div class="preview-glyphs">
870
+ <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>
871
+ </div>
872
+ <div class="preview-scale">
873
+ <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>
874
+ </div>
875
+ <div class="usage">
876
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-picture-o" />
877
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12b;" />
878
+ </div>
879
+ </div>
880
+
881
+ <div class="glyph">
882
+ <div class="preview-glyphs">
883
+ <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>
884
+ </div>
885
+ <div class="preview-scale">
886
+ <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>
887
+ </div>
888
+ <div class="usage">
889
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-plus" />
890
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12c;" />
891
+ </div>
892
+ </div>
893
+
894
+ <div class="glyph">
895
+ <div class="preview-glyphs">
896
+ <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>
897
+ </div>
898
+ <div class="preview-scale">
899
+ <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>
900
+ </div>
901
+ <div class="usage">
902
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-power-off" />
903
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12d;" />
904
+ </div>
905
+ </div>
906
+
907
+ <div class="glyph">
908
+ <div class="preview-glyphs">
909
+ <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>
910
+ </div>
911
+ <div class="preview-scale">
912
+ <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>
913
+ </div>
914
+ <div class="usage">
915
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-preview" />
916
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12e;" />
917
+ </div>
918
+ </div>
919
+
920
+ <div class="glyph">
921
+ <div class="preview-glyphs">
922
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-product-outline" class="icon-product-outline"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-product-outline" class="icon-product-outline"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-product-outline" class="icon-product-outline"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-product-outline" class="icon-product-outline"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-product-outline" class="icon-product-outline"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-product-outline" class="icon-product-outline"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-product-outline" class="icon-product-outline"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-product-outline" class="icon-product-outline"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-product-outline" class="icon-product-outline"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-product-outline" class="icon-product-outline"></i></span>
923
+ </div>
924
+ <div class="preview-scale">
925
+ <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>
926
+ </div>
927
+ <div class="usage">
928
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-product-outline" />
929
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12f;" />
930
+ </div>
931
+ </div>
932
+
933
+ <div class="glyph">
934
+ <div class="preview-glyphs">
935
+ <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>
936
+ </div>
937
+ <div class="preview-scale">
938
+ <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>
939
+ </div>
940
+ <div class="usage">
941
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-random" />
942
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf130;" />
943
+ </div>
944
+ </div>
945
+
946
+ <div class="glyph">
947
+ <div class="preview-glyphs">
948
+ <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>
949
+ </div>
950
+ <div class="preview-scale">
951
+ <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>
952
+ </div>
953
+ <div class="usage">
954
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-refresh" />
955
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf131;" />
956
+ </div>
957
+ </div>
958
+
959
+ <div class="glyph">
960
+ <div class="preview-glyphs">
961
+ <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>
962
+ </div>
963
+ <div class="preview-scale">
964
+ <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>
965
+ </div>
966
+ <div class="usage">
967
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-search" />
968
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf132;" />
969
+ </div>
970
+ </div>
971
+
972
+ <div class="glyph">
973
+ <div class="preview-glyphs">
974
+ <span class="step size-12"><span class="letters">Pp</span><i id="icon-shop" class="icon-shop"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-shop" class="icon-shop"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-shop" class="icon-shop"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-shop" class="icon-shop"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-shop" class="icon-shop"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-shop" class="icon-shop"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-shop" class="icon-shop"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-shop" class="icon-shop"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-shop" class="icon-shop"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-shop" class="icon-shop"></i></span>
975
+ </div>
976
+ <div class="preview-scale">
977
+ <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>
978
+ </div>
979
+ <div class="usage">
980
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-shop" />
981
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf133;" />
982
+ </div>
983
+ </div>
984
+
985
+ <div class="glyph">
986
+ <div class="preview-glyphs">
987
+ <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>
988
+ </div>
989
+ <div class="preview-scale">
990
+ <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>
991
+ </div>
992
+ <div class="usage">
993
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-social-outline" />
994
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf134;" />
995
+ </div>
996
+ </div>
997
+
998
+ <div class="glyph">
999
+ <div class="preview-glyphs">
1000
+ <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>
1001
+ </div>
1002
+ <div class="preview-scale">
1003
+ <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>
1004
+ </div>
1005
+ <div class="usage">
1006
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-trash" />
1007
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf135;" />
1008
+ </div>
1009
+ </div>
1010
+
1011
+ <div class="glyph">
1012
+ <div class="preview-glyphs">
1013
+ <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>
1014
+ </div>
1015
+ <div class="preview-scale">
1016
+ <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>
1017
+ </div>
1018
+ <div class="usage">
1019
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-upload-outline" />
1020
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf136;" />
1021
+ </div>
1022
+ </div>
1023
+
1024
+ <div class="glyph">
1025
+ <div class="preview-glyphs">
1026
+ <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>
1027
+ </div>
1028
+ <div class="preview-scale">
1029
+ <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>
1030
+ </div>
1031
+ <div class="usage">
1032
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-users-outline" />
1033
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf137;" />
1034
+ </div>
1035
+ </div>
1036
+
1037
+
1038
+ <footer>
1039
+ Made with love using <a href="http://fontcustom.com">Font Custom</a>.
1040
+ </footer>
1041
+ </div>
1042
+ </body>
1043
+ </html>