sul_styles 0.2.0 → 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (44) hide show
  1. checksums.yaml +4 -4
  2. data/.fontcustom-manifest.json +183 -19
  3. data/.gitignore +2 -1
  4. data/.rspec +1 -0
  5. data/.travis.yml +3 -0
  6. data/Gemfile +17 -0
  7. data/README.md +21 -1
  8. data/Rakefile +13 -0
  9. data/app/assets/fonts/sul-icons.eot +0 -0
  10. data/app/assets/fonts/sul-icons.svg +321 -0
  11. data/app/assets/fonts/sul-icons.ttf +0 -0
  12. data/app/assets/fonts/sul-icons.woff +0 -0
  13. data/{assets → app/assets}/stylesheets/_sul-icons-aliases.scss +4 -4
  14. data/app/assets/stylesheets/_sul-icons-rails.scss +137 -0
  15. data/app/assets/stylesheets/_sul-icons.scss +187 -0
  16. data/app/assets/stylesheets/styleguide/styleguide.scss +52 -0
  17. data/app/assets/stylesheets/styleguide.scss +1 -0
  18. data/{assets → app/assets}/stylesheets/sul-styles/su_primary_colors.scss +4 -1
  19. data/{assets → app/assets}/stylesheets/sul-styles/su_web_colors.scss +4 -1
  20. data/{assets → app/assets}/stylesheets/sul-styles.scss +1 -1
  21. data/app/controllers/sul_styles/style_guide_controller.rb +47 -0
  22. data/app/views/layouts/styleguide.html.erb +22 -0
  23. data/app/views/sul_styles/style_guide/colors.html.erb +18 -0
  24. data/app/views/sul_styles/style_guide/icons.html.erb +19 -0
  25. data/app/views/sul_styles/style_guide/index.html.erb +0 -0
  26. data/bin/rails +12 -0
  27. data/config/locales/sul_styles.en.yml +4 -0
  28. data/config/routes.rb +5 -0
  29. data/docs/styleguide/sul-icons-preview.html +640 -25
  30. data/fontcustom.yml +2 -2
  31. data/lib/generators/sul_styles/install_generator.rb +16 -0
  32. data/lib/sul_styles/engine.rb +17 -0
  33. data/lib/sul_styles/version.rb +1 -1
  34. data/lib/sul_styles.rb +1 -12
  35. data/sul_styles.gemspec +5 -0
  36. metadata +82 -15
  37. data/assets/fonts/sul-icons.eot +0 -0
  38. data/assets/fonts/sul-icons.svg +0 -73
  39. data/assets/fonts/sul-icons.ttf +0 -0
  40. data/assets/fonts/sul-icons.woff +0 -0
  41. data/assets/stylesheets/_sul-icons-rails.scss +0 -55
  42. data/assets/stylesheets/_sul-icons.scss +0 -64
  43. data/bin/console +0 -14
  44. data/bin/setup +0 -7
data/docs/styleguide/sul-icons-preview.html CHANGED
@@ -141,11 +141,11 @@
141
141
 
142
142
  @font-face {
143
143
  font-family: "sul-icons";
144
- src: url("../../assets/fonts/sul-icons.eot");
145
- src: url("../../assets/fonts/sul-icons.eot?#iefix") format("embedded-opentype"),
146
- url("../../assets/fonts/sul-icons.woff") format("woff"),
147
- url("../../assets/fonts/sul-icons.ttf") format("truetype"),
148
- url("../../assets/fonts/sul-icons.svg#sul-icons") format("svg");
144
+ src: url("../../app/assets/fonts/sul-icons.eot");
145
+ src: url("../../app/assets/fonts/sul-icons.eot?#iefix") format("embedded-opentype"),
146
+ url("../../app/assets/fonts/sul-icons.woff") format("woff"),
147
+ url("../../app/assets/fonts/sul-icons.ttf") format("truetype"),
148
+ url("../../app/assets/fonts/sul-icons.svg#sul-icons") format("svg");
149
149
  font-weight: normal;
150
150
  font-style: normal;
151
151
  }
@@ -153,21 +153,62 @@
153
153
  @media screen and (-webkit-min-device-pixel-ratio:0) {
154
154
  @font-face {
155
155
  font-family: "sul-icons";
156
- src: url("../../assets/fonts/sul-icons.svg#sul-icons") format("svg");
156
+ src: url("../../app/assets/fonts/sul-icons.svg#sul-icons") format("svg");
157
157
  }
158
158
  }
159
159
 
160
160
  [data-icon]:before { content: attr(data-icon); }
161
161
 
162
162
  [data-icon]:before,
163
- .sul-i-download-3:before,
164
- .sul-i-expand-diagonal-2:before,
165
- .sul-i-file-new-1:before,
166
- .sul-i-files-2:before,
163
+ .sul-i-arrow-left-3:before,
164
+ .sul-i-arrow-left-8:before,
165
+ .sul-i-arrow-right-3:before,
166
+ .sul-i-arrow-right-8:before,
167
+ .sul-i-book-open-4:before,
168
+ .sul-i-bookmark-all-1:before,
169
+ .sul-i-books-library:before,
170
+ .sul-i-box-1:before,
171
+ .sul-i-bubble-chat-2:before,
172
+ .sul-i-camera-film-1:before,
173
+ .sul-i-check-box-1:before,
174
+ .sul-i-cube:before,
175
+ .sul-i-download-3:before,
176
+ .sul-i-email:before,
177
+ .sul-i-expand-1:before,
178
+ .sul-i-file-music-1:before,
179
+ .sul-i-graph-bar-2:before,
167
180
  .sul-i-infomation-circle:before,
181
+ .sul-i-key-2:before,
182
+ .sul-i-layout-4:before,
183
+ .sul-i-layout-none:before,
168
184
  .sul-i-link-3:before,
185
+ .sul-i-list-bullets-1:before,
186
+ .sul-i-map-pin-1:before,
187
+ .sul-i-microphone-3:before,
188
+ .sul-i-mobile-phone-2:before,
189
+ .sul-i-mouse:before,
190
+ .sul-i-navigation-drawer-1:before,
191
+ .sul-i-navigation-drawer-2:before,
192
+ .sul-i-navigation-left-2:before,
193
+ .sul-i-network-web:before,
194
+ .sul-i-news-article:before,
195
+ .sul-i-newspaper:before,
196
+ .sul-i-notebook:before,
197
+ .sul-i-person-1:before,
198
+ .sul-i-person-information-1:before,
199
+ .sul-i-picture-2:before,
200
+ .sul-i-plug-1:before,
201
+ .sul-i-print-text:before,
202
+ .sul-i-quote-1:before,
203
+ .sul-i-search:before,
169
204
  .sul-i-share:before,
170
- .sul-i-view-module-1:before {
205
+ .sul-i-transfer-3:before,
206
+ .sul-i-turntable:before,
207
+ .sul-i-view-headline:before,
208
+ .sul-i-view-list:before,
209
+ .sul-i-view-module-1:before,
210
+ .sul-i-window-search:before,
211
+ .sul-i-zoom-in:before {
171
212
  display: inline-block;
172
213
  font-family: "sul-icons";
173
214
  font-style: normal;
@@ -182,14 +223,55 @@
182
223
  font-smoothing: antialiased;
183
224
  }
184
225
 
185
- .sul-i-download-3:before { content: "\f106"; }
186
- .sul-i-expand-diagonal-2:before { content: "\f103"; }
187
- .sul-i-file-new-1:before { content: "\f100"; }
188
- .sul-i-files-2:before { content: "\f101"; }
226
+ .sul-i-arrow-left-3:before { content: "\f108"; }
227
+ .sul-i-arrow-left-8:before { content: "\f109"; }
228
+ .sul-i-arrow-right-3:before { content: "\f10a"; }
229
+ .sul-i-arrow-right-8:before { content: "\f10b"; }
230
+ .sul-i-book-open-4:before { content: "\f10c"; }
231
+ .sul-i-bookmark-all-1:before { content: "\f10d"; }
232
+ .sul-i-books-library:before { content: "\f10e"; }
233
+ .sul-i-box-1:before { content: "\f10f"; }
234
+ .sul-i-bubble-chat-2:before { content: "\f110"; }
235
+ .sul-i-camera-film-1:before { content: "\f111"; }
236
+ .sul-i-check-box-1:before { content: "\f112"; }
237
+ .sul-i-cube:before { content: "\f113"; }
238
+ .sul-i-download-3:before { content: "\f106"; }
239
+ .sul-i-email:before { content: "\f114"; }
240
+ .sul-i-expand-1:before { content: "\f115"; }
241
+ .sul-i-file-music-1:before { content: "\f116"; }
242
+ .sul-i-graph-bar-2:before { content: "\f117"; }
189
243
  .sul-i-infomation-circle:before { content: "\f104"; }
244
+ .sul-i-key-2:before { content: "\f118"; }
245
+ .sul-i-layout-4:before { content: "\f119"; }
246
+ .sul-i-layout-none:before { content: "\f11a"; }
190
247
  .sul-i-link-3:before { content: "\f107"; }
248
+ .sul-i-list-bullets-1:before { content: "\f11b"; }
249
+ .sul-i-map-pin-1:before { content: "\f11c"; }
250
+ .sul-i-microphone-3:before { content: "\f11d"; }
251
+ .sul-i-mobile-phone-2:before { content: "\f11e"; }
252
+ .sul-i-mouse:before { content: "\f11f"; }
253
+ .sul-i-navigation-drawer-1:before { content: "\f120"; }
254
+ .sul-i-navigation-drawer-2:before { content: "\f121"; }
255
+ .sul-i-navigation-left-2:before { content: "\f122"; }
256
+ .sul-i-network-web:before { content: "\f123"; }
257
+ .sul-i-news-article:before { content: "\f124"; }
258
+ .sul-i-newspaper:before { content: "\f125"; }
259
+ .sul-i-notebook:before { content: "\f126"; }
260
+ .sul-i-person-1:before { content: "\f127"; }
261
+ .sul-i-person-information-1:before { content: "\f128"; }
262
+ .sul-i-picture-2:before { content: "\f129"; }
263
+ .sul-i-plug-1:before { content: "\f12a"; }
264
+ .sul-i-print-text:before { content: "\f12b"; }
265
+ .sul-i-quote-1:before { content: "\f12c"; }
266
+ .sul-i-search:before { content: "\f12d"; }
191
267
  .sul-i-share:before { content: "\f105"; }
268
+ .sul-i-transfer-3:before { content: "\f12e"; }
269
+ .sul-i-turntable:before { content: "\f12f"; }
270
+ .sul-i-view-headline:before { content: "\f130"; }
271
+ .sul-i-view-list:before { content: "\f131"; }
192
272
  .sul-i-view-module-1:before { content: "\f102"; }
273
+ .sul-i-window-search:before { content: "\f132"; }
274
+ .sul-i-zoom-in:before { content: "\f133"; }
193
275
  </style>
194
276
 
195
277
  <!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
@@ -205,11 +287,167 @@
205
287
  <body class="characters-off">
206
288
  <div id="page" class="container">
207
289
  <header>
208
- <h1>sul-icons contains 8 glyphs:</h1>
290
+ <h1>sul-icons contains 49 glyphs:</h1>
209
291
  <a onclick="toggleCharacters(); return false;" href="#">Toggle Preview Characters</a>
210
292
  </header>
211
293
 
212
294
 
295
+ <div class="glyph">
296
+ <div class="preview-glyphs">
297
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-arrow-left-3" class="sul-i-arrow-left-3"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-arrow-left-3" class="sul-i-arrow-left-3"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-arrow-left-3" class="sul-i-arrow-left-3"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-arrow-left-3" class="sul-i-arrow-left-3"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-arrow-left-3" class="sul-i-arrow-left-3"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-arrow-left-3" class="sul-i-arrow-left-3"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-arrow-left-3" class="sul-i-arrow-left-3"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-arrow-left-3" class="sul-i-arrow-left-3"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-arrow-left-3" class="sul-i-arrow-left-3"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-arrow-left-3" class="sul-i-arrow-left-3"></i></span>
298
+ </div>
299
+ <div class="preview-scale">
300
+ <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>
301
+ </div>
302
+ <div class="usage">
303
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-arrow-left-3" />
304
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf108;" />
305
+ </div>
306
+ </div>
307
+
308
+ <div class="glyph">
309
+ <div class="preview-glyphs">
310
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-arrow-left-8" class="sul-i-arrow-left-8"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-arrow-left-8" class="sul-i-arrow-left-8"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-arrow-left-8" class="sul-i-arrow-left-8"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-arrow-left-8" class="sul-i-arrow-left-8"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-arrow-left-8" class="sul-i-arrow-left-8"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-arrow-left-8" class="sul-i-arrow-left-8"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-arrow-left-8" class="sul-i-arrow-left-8"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-arrow-left-8" class="sul-i-arrow-left-8"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-arrow-left-8" class="sul-i-arrow-left-8"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-arrow-left-8" class="sul-i-arrow-left-8"></i></span>
311
+ </div>
312
+ <div class="preview-scale">
313
+ <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>
314
+ </div>
315
+ <div class="usage">
316
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-arrow-left-8" />
317
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf109;" />
318
+ </div>
319
+ </div>
320
+
321
+ <div class="glyph">
322
+ <div class="preview-glyphs">
323
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-arrow-right-3" class="sul-i-arrow-right-3"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-arrow-right-3" class="sul-i-arrow-right-3"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-arrow-right-3" class="sul-i-arrow-right-3"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-arrow-right-3" class="sul-i-arrow-right-3"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-arrow-right-3" class="sul-i-arrow-right-3"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-arrow-right-3" class="sul-i-arrow-right-3"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-arrow-right-3" class="sul-i-arrow-right-3"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-arrow-right-3" class="sul-i-arrow-right-3"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-arrow-right-3" class="sul-i-arrow-right-3"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-arrow-right-3" class="sul-i-arrow-right-3"></i></span>
324
+ </div>
325
+ <div class="preview-scale">
326
+ <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>
327
+ </div>
328
+ <div class="usage">
329
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-arrow-right-3" />
330
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10a;" />
331
+ </div>
332
+ </div>
333
+
334
+ <div class="glyph">
335
+ <div class="preview-glyphs">
336
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-arrow-right-8" class="sul-i-arrow-right-8"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-arrow-right-8" class="sul-i-arrow-right-8"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-arrow-right-8" class="sul-i-arrow-right-8"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-arrow-right-8" class="sul-i-arrow-right-8"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-arrow-right-8" class="sul-i-arrow-right-8"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-arrow-right-8" class="sul-i-arrow-right-8"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-arrow-right-8" class="sul-i-arrow-right-8"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-arrow-right-8" class="sul-i-arrow-right-8"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-arrow-right-8" class="sul-i-arrow-right-8"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-arrow-right-8" class="sul-i-arrow-right-8"></i></span>
337
+ </div>
338
+ <div class="preview-scale">
339
+ <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>
340
+ </div>
341
+ <div class="usage">
342
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-arrow-right-8" />
343
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10b;" />
344
+ </div>
345
+ </div>
346
+
347
+ <div class="glyph">
348
+ <div class="preview-glyphs">
349
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-book-open-4" class="sul-i-book-open-4"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-book-open-4" class="sul-i-book-open-4"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-book-open-4" class="sul-i-book-open-4"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-book-open-4" class="sul-i-book-open-4"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-book-open-4" class="sul-i-book-open-4"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-book-open-4" class="sul-i-book-open-4"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-book-open-4" class="sul-i-book-open-4"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-book-open-4" class="sul-i-book-open-4"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-book-open-4" class="sul-i-book-open-4"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-book-open-4" class="sul-i-book-open-4"></i></span>
350
+ </div>
351
+ <div class="preview-scale">
352
+ <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>
353
+ </div>
354
+ <div class="usage">
355
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-book-open-4" />
356
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10c;" />
357
+ </div>
358
+ </div>
359
+
360
+ <div class="glyph">
361
+ <div class="preview-glyphs">
362
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-bookmark-all-1" class="sul-i-bookmark-all-1"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-bookmark-all-1" class="sul-i-bookmark-all-1"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-bookmark-all-1" class="sul-i-bookmark-all-1"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-bookmark-all-1" class="sul-i-bookmark-all-1"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-bookmark-all-1" class="sul-i-bookmark-all-1"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-bookmark-all-1" class="sul-i-bookmark-all-1"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-bookmark-all-1" class="sul-i-bookmark-all-1"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-bookmark-all-1" class="sul-i-bookmark-all-1"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-bookmark-all-1" class="sul-i-bookmark-all-1"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-bookmark-all-1" class="sul-i-bookmark-all-1"></i></span>
363
+ </div>
364
+ <div class="preview-scale">
365
+ <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>
366
+ </div>
367
+ <div class="usage">
368
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-bookmark-all-1" />
369
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10d;" />
370
+ </div>
371
+ </div>
372
+
373
+ <div class="glyph">
374
+ <div class="preview-glyphs">
375
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-books-library" class="sul-i-books-library"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-books-library" class="sul-i-books-library"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-books-library" class="sul-i-books-library"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-books-library" class="sul-i-books-library"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-books-library" class="sul-i-books-library"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-books-library" class="sul-i-books-library"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-books-library" class="sul-i-books-library"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-books-library" class="sul-i-books-library"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-books-library" class="sul-i-books-library"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-books-library" class="sul-i-books-library"></i></span>
376
+ </div>
377
+ <div class="preview-scale">
378
+ <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>
379
+ </div>
380
+ <div class="usage">
381
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-books-library" />
382
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10e;" />
383
+ </div>
384
+ </div>
385
+
386
+ <div class="glyph">
387
+ <div class="preview-glyphs">
388
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-box-1" class="sul-i-box-1"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-box-1" class="sul-i-box-1"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-box-1" class="sul-i-box-1"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-box-1" class="sul-i-box-1"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-box-1" class="sul-i-box-1"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-box-1" class="sul-i-box-1"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-box-1" class="sul-i-box-1"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-box-1" class="sul-i-box-1"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-box-1" class="sul-i-box-1"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-box-1" class="sul-i-box-1"></i></span>
389
+ </div>
390
+ <div class="preview-scale">
391
+ <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>
392
+ </div>
393
+ <div class="usage">
394
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-box-1" />
395
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10f;" />
396
+ </div>
397
+ </div>
398
+
399
+ <div class="glyph">
400
+ <div class="preview-glyphs">
401
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-bubble-chat-2" class="sul-i-bubble-chat-2"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-bubble-chat-2" class="sul-i-bubble-chat-2"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-bubble-chat-2" class="sul-i-bubble-chat-2"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-bubble-chat-2" class="sul-i-bubble-chat-2"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-bubble-chat-2" class="sul-i-bubble-chat-2"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-bubble-chat-2" class="sul-i-bubble-chat-2"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-bubble-chat-2" class="sul-i-bubble-chat-2"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-bubble-chat-2" class="sul-i-bubble-chat-2"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-bubble-chat-2" class="sul-i-bubble-chat-2"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-bubble-chat-2" class="sul-i-bubble-chat-2"></i></span>
402
+ </div>
403
+ <div class="preview-scale">
404
+ <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>
405
+ </div>
406
+ <div class="usage">
407
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-bubble-chat-2" />
408
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf110;" />
409
+ </div>
410
+ </div>
411
+
412
+ <div class="glyph">
413
+ <div class="preview-glyphs">
414
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-camera-film-1" class="sul-i-camera-film-1"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-camera-film-1" class="sul-i-camera-film-1"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-camera-film-1" class="sul-i-camera-film-1"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-camera-film-1" class="sul-i-camera-film-1"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-camera-film-1" class="sul-i-camera-film-1"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-camera-film-1" class="sul-i-camera-film-1"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-camera-film-1" class="sul-i-camera-film-1"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-camera-film-1" class="sul-i-camera-film-1"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-camera-film-1" class="sul-i-camera-film-1"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-camera-film-1" class="sul-i-camera-film-1"></i></span>
415
+ </div>
416
+ <div class="preview-scale">
417
+ <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>
418
+ </div>
419
+ <div class="usage">
420
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-camera-film-1" />
421
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf111;" />
422
+ </div>
423
+ </div>
424
+
425
+ <div class="glyph">
426
+ <div class="preview-glyphs">
427
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-check-box-1" class="sul-i-check-box-1"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-check-box-1" class="sul-i-check-box-1"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-check-box-1" class="sul-i-check-box-1"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-check-box-1" class="sul-i-check-box-1"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-check-box-1" class="sul-i-check-box-1"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-check-box-1" class="sul-i-check-box-1"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-check-box-1" class="sul-i-check-box-1"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-check-box-1" class="sul-i-check-box-1"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-check-box-1" class="sul-i-check-box-1"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-check-box-1" class="sul-i-check-box-1"></i></span>
428
+ </div>
429
+ <div class="preview-scale">
430
+ <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>
431
+ </div>
432
+ <div class="usage">
433
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-check-box-1" />
434
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf112;" />
435
+ </div>
436
+ </div>
437
+
438
+ <div class="glyph">
439
+ <div class="preview-glyphs">
440
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-cube" class="sul-i-cube"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-cube" class="sul-i-cube"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-cube" class="sul-i-cube"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-cube" class="sul-i-cube"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-cube" class="sul-i-cube"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-cube" class="sul-i-cube"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-cube" class="sul-i-cube"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-cube" class="sul-i-cube"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-cube" class="sul-i-cube"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-cube" class="sul-i-cube"></i></span>
441
+ </div>
442
+ <div class="preview-scale">
443
+ <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>
444
+ </div>
445
+ <div class="usage">
446
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-cube" />
447
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf113;" />
448
+ </div>
449
+ </div>
450
+
213
451
  <div class="glyph">
214
452
  <div class="preview-glyphs">
215
453
  <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-download-3" class="sul-i-download-3"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-download-3" class="sul-i-download-3"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-download-3" class="sul-i-download-3"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-download-3" class="sul-i-download-3"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-download-3" class="sul-i-download-3"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-download-3" class="sul-i-download-3"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-download-3" class="sul-i-download-3"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-download-3" class="sul-i-download-3"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-download-3" class="sul-i-download-3"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-download-3" class="sul-i-download-3"></i></span>
@@ -225,40 +463,53 @@
225
463
 
226
464
  <div class="glyph">
227
465
  <div class="preview-glyphs">
228
- <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-expand-diagonal-2" class="sul-i-expand-diagonal-2"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-expand-diagonal-2" class="sul-i-expand-diagonal-2"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-expand-diagonal-2" class="sul-i-expand-diagonal-2"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-expand-diagonal-2" class="sul-i-expand-diagonal-2"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-expand-diagonal-2" class="sul-i-expand-diagonal-2"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-expand-diagonal-2" class="sul-i-expand-diagonal-2"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-expand-diagonal-2" class="sul-i-expand-diagonal-2"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-expand-diagonal-2" class="sul-i-expand-diagonal-2"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-expand-diagonal-2" class="sul-i-expand-diagonal-2"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-expand-diagonal-2" class="sul-i-expand-diagonal-2"></i></span>
466
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-email" class="sul-i-email"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-email" class="sul-i-email"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-email" class="sul-i-email"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-email" class="sul-i-email"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-email" class="sul-i-email"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-email" class="sul-i-email"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-email" class="sul-i-email"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-email" class="sul-i-email"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-email" class="sul-i-email"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-email" class="sul-i-email"></i></span>
229
467
  </div>
230
468
  <div class="preview-scale">
231
469
  <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>
232
470
  </div>
233
471
  <div class="usage">
234
- <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-expand-diagonal-2" />
235
- <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf103;" />
472
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-email" />
473
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf114;" />
236
474
  </div>
237
475
  </div>
238
476
 
239
477
  <div class="glyph">
240
478
  <div class="preview-glyphs">
241
- <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-file-new-1" class="sul-i-file-new-1"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-file-new-1" class="sul-i-file-new-1"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-file-new-1" class="sul-i-file-new-1"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-file-new-1" class="sul-i-file-new-1"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-file-new-1" class="sul-i-file-new-1"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-file-new-1" class="sul-i-file-new-1"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-file-new-1" class="sul-i-file-new-1"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-file-new-1" class="sul-i-file-new-1"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-file-new-1" class="sul-i-file-new-1"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-file-new-1" class="sul-i-file-new-1"></i></span>
479
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-expand-1" class="sul-i-expand-1"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-expand-1" class="sul-i-expand-1"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-expand-1" class="sul-i-expand-1"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-expand-1" class="sul-i-expand-1"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-expand-1" class="sul-i-expand-1"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-expand-1" class="sul-i-expand-1"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-expand-1" class="sul-i-expand-1"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-expand-1" class="sul-i-expand-1"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-expand-1" class="sul-i-expand-1"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-expand-1" class="sul-i-expand-1"></i></span>
242
480
  </div>
243
481
  <div class="preview-scale">
244
482
  <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>
245
483
  </div>
246
484
  <div class="usage">
247
- <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-file-new-1" />
248
- <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf100;" />
485
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-expand-1" />
486
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf115;" />
249
487
  </div>
250
488
  </div>
251
489
 
252
490
  <div class="glyph">
253
491
  <div class="preview-glyphs">
254
- <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-files-2" class="sul-i-files-2"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-files-2" class="sul-i-files-2"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-files-2" class="sul-i-files-2"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-files-2" class="sul-i-files-2"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-files-2" class="sul-i-files-2"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-files-2" class="sul-i-files-2"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-files-2" class="sul-i-files-2"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-files-2" class="sul-i-files-2"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-files-2" class="sul-i-files-2"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-files-2" class="sul-i-files-2"></i></span>
492
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-file-music-1" class="sul-i-file-music-1"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-file-music-1" class="sul-i-file-music-1"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-file-music-1" class="sul-i-file-music-1"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-file-music-1" class="sul-i-file-music-1"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-file-music-1" class="sul-i-file-music-1"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-file-music-1" class="sul-i-file-music-1"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-file-music-1" class="sul-i-file-music-1"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-file-music-1" class="sul-i-file-music-1"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-file-music-1" class="sul-i-file-music-1"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-file-music-1" class="sul-i-file-music-1"></i></span>
255
493
  </div>
256
494
  <div class="preview-scale">
257
495
  <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>
258
496
  </div>
259
497
  <div class="usage">
260
- <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-files-2" />
261
- <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf101;" />
498
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-file-music-1" />
499
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf116;" />
500
+ </div>
501
+ </div>
502
+
503
+ <div class="glyph">
504
+ <div class="preview-glyphs">
505
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-graph-bar-2" class="sul-i-graph-bar-2"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-graph-bar-2" class="sul-i-graph-bar-2"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-graph-bar-2" class="sul-i-graph-bar-2"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-graph-bar-2" class="sul-i-graph-bar-2"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-graph-bar-2" class="sul-i-graph-bar-2"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-graph-bar-2" class="sul-i-graph-bar-2"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-graph-bar-2" class="sul-i-graph-bar-2"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-graph-bar-2" class="sul-i-graph-bar-2"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-graph-bar-2" class="sul-i-graph-bar-2"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-graph-bar-2" class="sul-i-graph-bar-2"></i></span>
506
+ </div>
507
+ <div class="preview-scale">
508
+ <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>
509
+ </div>
510
+ <div class="usage">
511
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-graph-bar-2" />
512
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf117;" />
262
513
  </div>
263
514
  </div>
264
515
 
@@ -275,6 +526,45 @@
275
526
  </div>
276
527
  </div>
277
528
 
529
+ <div class="glyph">
530
+ <div class="preview-glyphs">
531
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-key-2" class="sul-i-key-2"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-key-2" class="sul-i-key-2"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-key-2" class="sul-i-key-2"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-key-2" class="sul-i-key-2"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-key-2" class="sul-i-key-2"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-key-2" class="sul-i-key-2"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-key-2" class="sul-i-key-2"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-key-2" class="sul-i-key-2"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-key-2" class="sul-i-key-2"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-key-2" class="sul-i-key-2"></i></span>
532
+ </div>
533
+ <div class="preview-scale">
534
+ <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>
535
+ </div>
536
+ <div class="usage">
537
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-key-2" />
538
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf118;" />
539
+ </div>
540
+ </div>
541
+
542
+ <div class="glyph">
543
+ <div class="preview-glyphs">
544
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-layout-4" class="sul-i-layout-4"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-layout-4" class="sul-i-layout-4"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-layout-4" class="sul-i-layout-4"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-layout-4" class="sul-i-layout-4"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-layout-4" class="sul-i-layout-4"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-layout-4" class="sul-i-layout-4"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-layout-4" class="sul-i-layout-4"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-layout-4" class="sul-i-layout-4"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-layout-4" class="sul-i-layout-4"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-layout-4" class="sul-i-layout-4"></i></span>
545
+ </div>
546
+ <div class="preview-scale">
547
+ <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>
548
+ </div>
549
+ <div class="usage">
550
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-layout-4" />
551
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf119;" />
552
+ </div>
553
+ </div>
554
+
555
+ <div class="glyph">
556
+ <div class="preview-glyphs">
557
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-layout-none" class="sul-i-layout-none"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-layout-none" class="sul-i-layout-none"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-layout-none" class="sul-i-layout-none"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-layout-none" class="sul-i-layout-none"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-layout-none" class="sul-i-layout-none"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-layout-none" class="sul-i-layout-none"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-layout-none" class="sul-i-layout-none"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-layout-none" class="sul-i-layout-none"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-layout-none" class="sul-i-layout-none"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-layout-none" class="sul-i-layout-none"></i></span>
558
+ </div>
559
+ <div class="preview-scale">
560
+ <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>
561
+ </div>
562
+ <div class="usage">
563
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-layout-none" />
564
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11a;" />
565
+ </div>
566
+ </div>
567
+
278
568
  <div class="glyph">
279
569
  <div class="preview-glyphs">
280
570
  <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-link-3" class="sul-i-link-3"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-link-3" class="sul-i-link-3"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-link-3" class="sul-i-link-3"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-link-3" class="sul-i-link-3"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-link-3" class="sul-i-link-3"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-link-3" class="sul-i-link-3"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-link-3" class="sul-i-link-3"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-link-3" class="sul-i-link-3"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-link-3" class="sul-i-link-3"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-link-3" class="sul-i-link-3"></i></span>
@@ -288,6 +578,253 @@
288
578
  </div>
289
579
  </div>
290
580
 
581
+ <div class="glyph">
582
+ <div class="preview-glyphs">
583
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-list-bullets-1" class="sul-i-list-bullets-1"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-list-bullets-1" class="sul-i-list-bullets-1"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-list-bullets-1" class="sul-i-list-bullets-1"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-list-bullets-1" class="sul-i-list-bullets-1"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-list-bullets-1" class="sul-i-list-bullets-1"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-list-bullets-1" class="sul-i-list-bullets-1"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-list-bullets-1" class="sul-i-list-bullets-1"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-list-bullets-1" class="sul-i-list-bullets-1"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-list-bullets-1" class="sul-i-list-bullets-1"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-list-bullets-1" class="sul-i-list-bullets-1"></i></span>
584
+ </div>
585
+ <div class="preview-scale">
586
+ <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>
587
+ </div>
588
+ <div class="usage">
589
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-list-bullets-1" />
590
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11b;" />
591
+ </div>
592
+ </div>
593
+
594
+ <div class="glyph">
595
+ <div class="preview-glyphs">
596
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-map-pin-1" class="sul-i-map-pin-1"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-map-pin-1" class="sul-i-map-pin-1"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-map-pin-1" class="sul-i-map-pin-1"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-map-pin-1" class="sul-i-map-pin-1"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-map-pin-1" class="sul-i-map-pin-1"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-map-pin-1" class="sul-i-map-pin-1"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-map-pin-1" class="sul-i-map-pin-1"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-map-pin-1" class="sul-i-map-pin-1"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-map-pin-1" class="sul-i-map-pin-1"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-map-pin-1" class="sul-i-map-pin-1"></i></span>
597
+ </div>
598
+ <div class="preview-scale">
599
+ <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>
600
+ </div>
601
+ <div class="usage">
602
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-map-pin-1" />
603
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11c;" />
604
+ </div>
605
+ </div>
606
+
607
+ <div class="glyph">
608
+ <div class="preview-glyphs">
609
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-microphone-3" class="sul-i-microphone-3"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-microphone-3" class="sul-i-microphone-3"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-microphone-3" class="sul-i-microphone-3"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-microphone-3" class="sul-i-microphone-3"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-microphone-3" class="sul-i-microphone-3"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-microphone-3" class="sul-i-microphone-3"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-microphone-3" class="sul-i-microphone-3"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-microphone-3" class="sul-i-microphone-3"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-microphone-3" class="sul-i-microphone-3"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-microphone-3" class="sul-i-microphone-3"></i></span>
610
+ </div>
611
+ <div class="preview-scale">
612
+ <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>
613
+ </div>
614
+ <div class="usage">
615
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-microphone-3" />
616
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11d;" />
617
+ </div>
618
+ </div>
619
+
620
+ <div class="glyph">
621
+ <div class="preview-glyphs">
622
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-mobile-phone-2" class="sul-i-mobile-phone-2"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-mobile-phone-2" class="sul-i-mobile-phone-2"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-mobile-phone-2" class="sul-i-mobile-phone-2"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-mobile-phone-2" class="sul-i-mobile-phone-2"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-mobile-phone-2" class="sul-i-mobile-phone-2"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-mobile-phone-2" class="sul-i-mobile-phone-2"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-mobile-phone-2" class="sul-i-mobile-phone-2"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-mobile-phone-2" class="sul-i-mobile-phone-2"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-mobile-phone-2" class="sul-i-mobile-phone-2"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-mobile-phone-2" class="sul-i-mobile-phone-2"></i></span>
623
+ </div>
624
+ <div class="preview-scale">
625
+ <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>
626
+ </div>
627
+ <div class="usage">
628
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-mobile-phone-2" />
629
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11e;" />
630
+ </div>
631
+ </div>
632
+
633
+ <div class="glyph">
634
+ <div class="preview-glyphs">
635
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-mouse" class="sul-i-mouse"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-mouse" class="sul-i-mouse"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-mouse" class="sul-i-mouse"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-mouse" class="sul-i-mouse"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-mouse" class="sul-i-mouse"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-mouse" class="sul-i-mouse"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-mouse" class="sul-i-mouse"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-mouse" class="sul-i-mouse"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-mouse" class="sul-i-mouse"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-mouse" class="sul-i-mouse"></i></span>
636
+ </div>
637
+ <div class="preview-scale">
638
+ <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>
639
+ </div>
640
+ <div class="usage">
641
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-mouse" />
642
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11f;" />
643
+ </div>
644
+ </div>
645
+
646
+ <div class="glyph">
647
+ <div class="preview-glyphs">
648
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-navigation-drawer-1" class="sul-i-navigation-drawer-1"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-navigation-drawer-1" class="sul-i-navigation-drawer-1"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-navigation-drawer-1" class="sul-i-navigation-drawer-1"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-navigation-drawer-1" class="sul-i-navigation-drawer-1"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-navigation-drawer-1" class="sul-i-navigation-drawer-1"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-navigation-drawer-1" class="sul-i-navigation-drawer-1"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-navigation-drawer-1" class="sul-i-navigation-drawer-1"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-navigation-drawer-1" class="sul-i-navigation-drawer-1"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-navigation-drawer-1" class="sul-i-navigation-drawer-1"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-navigation-drawer-1" class="sul-i-navigation-drawer-1"></i></span>
649
+ </div>
650
+ <div class="preview-scale">
651
+ <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>
652
+ </div>
653
+ <div class="usage">
654
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-navigation-drawer-1" />
655
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf120;" />
656
+ </div>
657
+ </div>
658
+
659
+ <div class="glyph">
660
+ <div class="preview-glyphs">
661
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-navigation-drawer-2" class="sul-i-navigation-drawer-2"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-navigation-drawer-2" class="sul-i-navigation-drawer-2"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-navigation-drawer-2" class="sul-i-navigation-drawer-2"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-navigation-drawer-2" class="sul-i-navigation-drawer-2"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-navigation-drawer-2" class="sul-i-navigation-drawer-2"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-navigation-drawer-2" class="sul-i-navigation-drawer-2"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-navigation-drawer-2" class="sul-i-navigation-drawer-2"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-navigation-drawer-2" class="sul-i-navigation-drawer-2"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-navigation-drawer-2" class="sul-i-navigation-drawer-2"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-navigation-drawer-2" class="sul-i-navigation-drawer-2"></i></span>
662
+ </div>
663
+ <div class="preview-scale">
664
+ <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>
665
+ </div>
666
+ <div class="usage">
667
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-navigation-drawer-2" />
668
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf121;" />
669
+ </div>
670
+ </div>
671
+
672
+ <div class="glyph">
673
+ <div class="preview-glyphs">
674
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-navigation-left-2" class="sul-i-navigation-left-2"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-navigation-left-2" class="sul-i-navigation-left-2"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-navigation-left-2" class="sul-i-navigation-left-2"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-navigation-left-2" class="sul-i-navigation-left-2"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-navigation-left-2" class="sul-i-navigation-left-2"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-navigation-left-2" class="sul-i-navigation-left-2"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-navigation-left-2" class="sul-i-navigation-left-2"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-navigation-left-2" class="sul-i-navigation-left-2"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-navigation-left-2" class="sul-i-navigation-left-2"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-navigation-left-2" class="sul-i-navigation-left-2"></i></span>
675
+ </div>
676
+ <div class="preview-scale">
677
+ <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>
678
+ </div>
679
+ <div class="usage">
680
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-navigation-left-2" />
681
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf122;" />
682
+ </div>
683
+ </div>
684
+
685
+ <div class="glyph">
686
+ <div class="preview-glyphs">
687
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-network-web" class="sul-i-network-web"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-network-web" class="sul-i-network-web"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-network-web" class="sul-i-network-web"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-network-web" class="sul-i-network-web"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-network-web" class="sul-i-network-web"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-network-web" class="sul-i-network-web"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-network-web" class="sul-i-network-web"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-network-web" class="sul-i-network-web"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-network-web" class="sul-i-network-web"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-network-web" class="sul-i-network-web"></i></span>
688
+ </div>
689
+ <div class="preview-scale">
690
+ <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>
691
+ </div>
692
+ <div class="usage">
693
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-network-web" />
694
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf123;" />
695
+ </div>
696
+ </div>
697
+
698
+ <div class="glyph">
699
+ <div class="preview-glyphs">
700
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-news-article" class="sul-i-news-article"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-news-article" class="sul-i-news-article"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-news-article" class="sul-i-news-article"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-news-article" class="sul-i-news-article"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-news-article" class="sul-i-news-article"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-news-article" class="sul-i-news-article"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-news-article" class="sul-i-news-article"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-news-article" class="sul-i-news-article"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-news-article" class="sul-i-news-article"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-news-article" class="sul-i-news-article"></i></span>
701
+ </div>
702
+ <div class="preview-scale">
703
+ <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>
704
+ </div>
705
+ <div class="usage">
706
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-news-article" />
707
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf124;" />
708
+ </div>
709
+ </div>
710
+
711
+ <div class="glyph">
712
+ <div class="preview-glyphs">
713
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-newspaper" class="sul-i-newspaper"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-newspaper" class="sul-i-newspaper"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-newspaper" class="sul-i-newspaper"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-newspaper" class="sul-i-newspaper"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-newspaper" class="sul-i-newspaper"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-newspaper" class="sul-i-newspaper"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-newspaper" class="sul-i-newspaper"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-newspaper" class="sul-i-newspaper"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-newspaper" class="sul-i-newspaper"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-newspaper" class="sul-i-newspaper"></i></span>
714
+ </div>
715
+ <div class="preview-scale">
716
+ <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>
717
+ </div>
718
+ <div class="usage">
719
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-newspaper" />
720
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf125;" />
721
+ </div>
722
+ </div>
723
+
724
+ <div class="glyph">
725
+ <div class="preview-glyphs">
726
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-notebook" class="sul-i-notebook"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-notebook" class="sul-i-notebook"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-notebook" class="sul-i-notebook"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-notebook" class="sul-i-notebook"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-notebook" class="sul-i-notebook"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-notebook" class="sul-i-notebook"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-notebook" class="sul-i-notebook"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-notebook" class="sul-i-notebook"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-notebook" class="sul-i-notebook"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-notebook" class="sul-i-notebook"></i></span>
727
+ </div>
728
+ <div class="preview-scale">
729
+ <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>
730
+ </div>
731
+ <div class="usage">
732
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-notebook" />
733
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf126;" />
734
+ </div>
735
+ </div>
736
+
737
+ <div class="glyph">
738
+ <div class="preview-glyphs">
739
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-person-1" class="sul-i-person-1"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-person-1" class="sul-i-person-1"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-person-1" class="sul-i-person-1"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-person-1" class="sul-i-person-1"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-person-1" class="sul-i-person-1"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-person-1" class="sul-i-person-1"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-person-1" class="sul-i-person-1"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-person-1" class="sul-i-person-1"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-person-1" class="sul-i-person-1"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-person-1" class="sul-i-person-1"></i></span>
740
+ </div>
741
+ <div class="preview-scale">
742
+ <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>
743
+ </div>
744
+ <div class="usage">
745
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-person-1" />
746
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf127;" />
747
+ </div>
748
+ </div>
749
+
750
+ <div class="glyph">
751
+ <div class="preview-glyphs">
752
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-person-information-1" class="sul-i-person-information-1"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-person-information-1" class="sul-i-person-information-1"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-person-information-1" class="sul-i-person-information-1"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-person-information-1" class="sul-i-person-information-1"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-person-information-1" class="sul-i-person-information-1"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-person-information-1" class="sul-i-person-information-1"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-person-information-1" class="sul-i-person-information-1"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-person-information-1" class="sul-i-person-information-1"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-person-information-1" class="sul-i-person-information-1"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-person-information-1" class="sul-i-person-information-1"></i></span>
753
+ </div>
754
+ <div class="preview-scale">
755
+ <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>
756
+ </div>
757
+ <div class="usage">
758
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-person-information-1" />
759
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf128;" />
760
+ </div>
761
+ </div>
762
+
763
+ <div class="glyph">
764
+ <div class="preview-glyphs">
765
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-picture-2" class="sul-i-picture-2"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-picture-2" class="sul-i-picture-2"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-picture-2" class="sul-i-picture-2"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-picture-2" class="sul-i-picture-2"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-picture-2" class="sul-i-picture-2"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-picture-2" class="sul-i-picture-2"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-picture-2" class="sul-i-picture-2"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-picture-2" class="sul-i-picture-2"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-picture-2" class="sul-i-picture-2"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-picture-2" class="sul-i-picture-2"></i></span>
766
+ </div>
767
+ <div class="preview-scale">
768
+ <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>
769
+ </div>
770
+ <div class="usage">
771
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-picture-2" />
772
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf129;" />
773
+ </div>
774
+ </div>
775
+
776
+ <div class="glyph">
777
+ <div class="preview-glyphs">
778
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-plug-1" class="sul-i-plug-1"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-plug-1" class="sul-i-plug-1"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-plug-1" class="sul-i-plug-1"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-plug-1" class="sul-i-plug-1"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-plug-1" class="sul-i-plug-1"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-plug-1" class="sul-i-plug-1"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-plug-1" class="sul-i-plug-1"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-plug-1" class="sul-i-plug-1"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-plug-1" class="sul-i-plug-1"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-plug-1" class="sul-i-plug-1"></i></span>
779
+ </div>
780
+ <div class="preview-scale">
781
+ <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>
782
+ </div>
783
+ <div class="usage">
784
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-plug-1" />
785
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12a;" />
786
+ </div>
787
+ </div>
788
+
789
+ <div class="glyph">
790
+ <div class="preview-glyphs">
791
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-print-text" class="sul-i-print-text"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-print-text" class="sul-i-print-text"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-print-text" class="sul-i-print-text"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-print-text" class="sul-i-print-text"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-print-text" class="sul-i-print-text"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-print-text" class="sul-i-print-text"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-print-text" class="sul-i-print-text"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-print-text" class="sul-i-print-text"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-print-text" class="sul-i-print-text"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-print-text" class="sul-i-print-text"></i></span>
792
+ </div>
793
+ <div class="preview-scale">
794
+ <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>
795
+ </div>
796
+ <div class="usage">
797
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-print-text" />
798
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12b;" />
799
+ </div>
800
+ </div>
801
+
802
+ <div class="glyph">
803
+ <div class="preview-glyphs">
804
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-quote-1" class="sul-i-quote-1"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-quote-1" class="sul-i-quote-1"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-quote-1" class="sul-i-quote-1"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-quote-1" class="sul-i-quote-1"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-quote-1" class="sul-i-quote-1"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-quote-1" class="sul-i-quote-1"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-quote-1" class="sul-i-quote-1"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-quote-1" class="sul-i-quote-1"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-quote-1" class="sul-i-quote-1"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-quote-1" class="sul-i-quote-1"></i></span>
805
+ </div>
806
+ <div class="preview-scale">
807
+ <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>
808
+ </div>
809
+ <div class="usage">
810
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-quote-1" />
811
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12c;" />
812
+ </div>
813
+ </div>
814
+
815
+ <div class="glyph">
816
+ <div class="preview-glyphs">
817
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-search" class="sul-i-search"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-search" class="sul-i-search"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-search" class="sul-i-search"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-search" class="sul-i-search"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-search" class="sul-i-search"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-search" class="sul-i-search"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-search" class="sul-i-search"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-search" class="sul-i-search"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-search" class="sul-i-search"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-search" class="sul-i-search"></i></span>
818
+ </div>
819
+ <div class="preview-scale">
820
+ <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>
821
+ </div>
822
+ <div class="usage">
823
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-search" />
824
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12d;" />
825
+ </div>
826
+ </div>
827
+
291
828
  <div class="glyph">
292
829
  <div class="preview-glyphs">
293
830
  <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-share" class="sul-i-share"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-share" class="sul-i-share"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-share" class="sul-i-share"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-share" class="sul-i-share"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-share" class="sul-i-share"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-share" class="sul-i-share"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-share" class="sul-i-share"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-share" class="sul-i-share"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-share" class="sul-i-share"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-share" class="sul-i-share"></i></span>
@@ -301,6 +838,58 @@
301
838
  </div>
302
839
  </div>
303
840
 
841
+ <div class="glyph">
842
+ <div class="preview-glyphs">
843
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-transfer-3" class="sul-i-transfer-3"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-transfer-3" class="sul-i-transfer-3"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-transfer-3" class="sul-i-transfer-3"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-transfer-3" class="sul-i-transfer-3"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-transfer-3" class="sul-i-transfer-3"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-transfer-3" class="sul-i-transfer-3"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-transfer-3" class="sul-i-transfer-3"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-transfer-3" class="sul-i-transfer-3"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-transfer-3" class="sul-i-transfer-3"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-transfer-3" class="sul-i-transfer-3"></i></span>
844
+ </div>
845
+ <div class="preview-scale">
846
+ <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>
847
+ </div>
848
+ <div class="usage">
849
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-transfer-3" />
850
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12e;" />
851
+ </div>
852
+ </div>
853
+
854
+ <div class="glyph">
855
+ <div class="preview-glyphs">
856
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-turntable" class="sul-i-turntable"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-turntable" class="sul-i-turntable"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-turntable" class="sul-i-turntable"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-turntable" class="sul-i-turntable"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-turntable" class="sul-i-turntable"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-turntable" class="sul-i-turntable"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-turntable" class="sul-i-turntable"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-turntable" class="sul-i-turntable"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-turntable" class="sul-i-turntable"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-turntable" class="sul-i-turntable"></i></span>
857
+ </div>
858
+ <div class="preview-scale">
859
+ <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>
860
+ </div>
861
+ <div class="usage">
862
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-turntable" />
863
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12f;" />
864
+ </div>
865
+ </div>
866
+
867
+ <div class="glyph">
868
+ <div class="preview-glyphs">
869
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-view-headline" class="sul-i-view-headline"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-view-headline" class="sul-i-view-headline"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-view-headline" class="sul-i-view-headline"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-view-headline" class="sul-i-view-headline"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-view-headline" class="sul-i-view-headline"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-view-headline" class="sul-i-view-headline"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-view-headline" class="sul-i-view-headline"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-view-headline" class="sul-i-view-headline"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-view-headline" class="sul-i-view-headline"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-view-headline" class="sul-i-view-headline"></i></span>
870
+ </div>
871
+ <div class="preview-scale">
872
+ <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>
873
+ </div>
874
+ <div class="usage">
875
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-view-headline" />
876
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf130;" />
877
+ </div>
878
+ </div>
879
+
880
+ <div class="glyph">
881
+ <div class="preview-glyphs">
882
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-view-list" class="sul-i-view-list"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-view-list" class="sul-i-view-list"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-view-list" class="sul-i-view-list"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-view-list" class="sul-i-view-list"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-view-list" class="sul-i-view-list"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-view-list" class="sul-i-view-list"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-view-list" class="sul-i-view-list"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-view-list" class="sul-i-view-list"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-view-list" class="sul-i-view-list"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-view-list" class="sul-i-view-list"></i></span>
883
+ </div>
884
+ <div class="preview-scale">
885
+ <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>
886
+ </div>
887
+ <div class="usage">
888
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-view-list" />
889
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf131;" />
890
+ </div>
891
+ </div>
892
+
304
893
  <div class="glyph">
305
894
  <div class="preview-glyphs">
306
895
  <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-view-module-1" class="sul-i-view-module-1"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-view-module-1" class="sul-i-view-module-1"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-view-module-1" class="sul-i-view-module-1"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-view-module-1" class="sul-i-view-module-1"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-view-module-1" class="sul-i-view-module-1"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-view-module-1" class="sul-i-view-module-1"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-view-module-1" class="sul-i-view-module-1"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-view-module-1" class="sul-i-view-module-1"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-view-module-1" class="sul-i-view-module-1"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-view-module-1" class="sul-i-view-module-1"></i></span>
@@ -314,6 +903,32 @@
314
903
  </div>
315
904
  </div>
316
905
 
906
+ <div class="glyph">
907
+ <div class="preview-glyphs">
908
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-window-search" class="sul-i-window-search"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-window-search" class="sul-i-window-search"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-window-search" class="sul-i-window-search"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-window-search" class="sul-i-window-search"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-window-search" class="sul-i-window-search"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-window-search" class="sul-i-window-search"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-window-search" class="sul-i-window-search"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-window-search" class="sul-i-window-search"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-window-search" class="sul-i-window-search"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-window-search" class="sul-i-window-search"></i></span>
909
+ </div>
910
+ <div class="preview-scale">
911
+ <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>
912
+ </div>
913
+ <div class="usage">
914
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-window-search" />
915
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf132;" />
916
+ </div>
917
+ </div>
918
+
919
+ <div class="glyph">
920
+ <div class="preview-glyphs">
921
+ <span class="step size-12"><span class="letters">Pp</span><i id="sul-i-zoom-in" class="sul-i-zoom-in"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="sul-i-zoom-in" class="sul-i-zoom-in"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="sul-i-zoom-in" class="sul-i-zoom-in"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="sul-i-zoom-in" class="sul-i-zoom-in"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="sul-i-zoom-in" class="sul-i-zoom-in"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="sul-i-zoom-in" class="sul-i-zoom-in"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="sul-i-zoom-in" class="sul-i-zoom-in"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="sul-i-zoom-in" class="sul-i-zoom-in"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="sul-i-zoom-in" class="sul-i-zoom-in"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="sul-i-zoom-in" class="sul-i-zoom-in"></i></span>
922
+ </div>
923
+ <div class="preview-scale">
924
+ <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>
925
+ </div>
926
+ <div class="usage">
927
+ <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".sul-i-zoom-in" />
928
+ <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf133;" />
929
+ </div>
930
+ </div>
931
+
317
932
 
318
933
  <footer>
319
934
  Made with love using <a href="http://fontcustom.com">Font Custom</a>.