sul_styles 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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>.