MightyPork/datatable.directory
1
0
Fork 1
Code Issues 25 Pull Requests Releases Wiki Activity

UX improvements in table editor

Browse Source
This commit is contained in:
MightyPork
2018-08-10 18:11:34 +02:00
parent c642774316
commit 1e183f5059
24 changed files with 654 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/fonts/fa-dtbl-1-preview.html
+135 -106
View File
@@ -162,6 +162,7 @@
[data-icon]:before,
.fa-address-card-o:before,
.fa-arrow-left:before,
.fa-bars:before,
.fa-calendar:before,
.fa-chevron-down:before,
@@ -172,13 +173,13 @@
.fa-exclamation-triangle:before,
.fa-eye:before,
.fa-facebook-square:before,
.fa-file-excel-o:before,
.fa-floppy-o:before,
.fa-github:before,
.fa-globe:before,
.fa-google:before,
.fa-history:before,
.fa-home:before,
.fa-hourglass:before,
.fa-inbox:before,
.fa-key-modern:before,
.fa-link:before,
@@ -186,14 +187,15 @@
.fa-pencil:before,
.fa-plus:before,
.fa-question-circle:before,
.fa-reply:before,
.fa-sign-in:before,
.fa-sign-out:before,
.fa-spinner:before,
.fa-star:before,
.fa-star-o:before,
.fa-sun-o:before,
.fa-table:before,
.fa-th-list:before,
.fa-times:before,
.fa-trash-o:before,
.fa-undo:before,
.fa-user:before,
@@ -216,45 +218,47 @@
}
.fa-address-card-o:before { content: "\f100"; }
.fa-bars:before { content: "\f101"; }
.fa-calendar:before { content: "\f102"; }
.fa-chevron-down:before { content: "\f103"; }
.fa-chevron-up:before { content: "\f104"; }
.fa-code-fork:before { content: "\f105"; }
.fa-comment:before { content: "\f106"; }
.fa-download:before { content: "\f107"; }
.fa-exclamation-triangle:before { content: "\f108"; }
.fa-eye:before { content: "\f109"; }
.fa-facebook-square:before { content: "\f10a"; }
.fa-floppy-o:before { content: "\f10b"; }
.fa-github:before { content: "\f10c"; }
.fa-globe:before { content: "\f10d"; }
.fa-google:before { content: "\f10e"; }
.fa-history:before { content: "\f10f"; }
.fa-home:before { content: "\f110"; }
.fa-hourglass:before { content: "\f111"; }
.fa-inbox:before { content: "\f112"; }
.fa-key-modern:before { content: "\f113"; }
.fa-link:before { content: "\f114"; }
.fa-moon-o:before { content: "\f115"; }
.fa-pencil:before { content: "\f116"; }
.fa-plus:before { content: "\f117"; }
.fa-question-circle:before { content: "\f118"; }
.fa-sign-in:before { content: "\f119"; }
.fa-sign-out:before { content: "\f11a"; }
.fa-star:before { content: "\f11b"; }
.fa-star-o:before { content: "\f11c"; }
.fa-sun-o:before { content: "\f11d"; }
.fa-table:before { content: "\f11e"; }
.fa-th-list:before { content: "\f11f"; }
.fa-times:before { content: "\f120"; }
.fa-trash-o:before { content: "\f121"; }
.fa-undo:before { content: "\f122"; }
.fa-user:before { content: "\f123"; }
.fa-user-circle-o:before { content: "\f124"; }
.fa-user-plus:before { content: "\f125"; }
.fa-users:before { content: "\f126"; }
.fa-wrench:before { content: "\f127"; }
.fa-arrow-left:before { content: "\f101"; }
.fa-bars:before { content: "\f102"; }
.fa-calendar:before { content: "\f103"; }
.fa-chevron-down:before { content: "\f104"; }
.fa-chevron-up:before { content: "\f105"; }
.fa-code-fork:before { content: "\f106"; }
.fa-comment:before { content: "\f107"; }
.fa-download:before { content: "\f108"; }
.fa-exclamation-triangle:before { content: "\f109"; }
.fa-eye:before { content: "\f10a"; }
.fa-facebook-square:before { content: "\f10b"; }
.fa-file-excel-o:before { content: "\f10c"; }
.fa-floppy-o:before { content: "\f10d"; }
.fa-github:before { content: "\f10e"; }
.fa-globe:before { content: "\f10f"; }
.fa-google:before { content: "\f110"; }
.fa-history:before { content: "\f111"; }
.fa-home:before { content: "\f112"; }
.fa-inbox:before { content: "\f113"; }
.fa-key-modern:before { content: "\f114"; }
.fa-link:before { content: "\f115"; }
.fa-moon-o:before { content: "\f116"; }
.fa-pencil:before { content: "\f117"; }
.fa-plus:before { content: "\f118"; }
.fa-question-circle:before { content: "\f119"; }
.fa-reply:before { content: "\f11a"; }
.fa-sign-in:before { content: "\f11b"; }
.fa-sign-out:before { content: "\f11c"; }
.fa-spinner:before { content: "\f11d"; }
.fa-star:before { content: "\f11e"; }
.fa-star-o:before { content: "\f11f"; }
.fa-sun-o:before { content: "\f120"; }
.fa-table:before { content: "\f121"; }
.fa-th-list:before { content: "\f122"; }
.fa-trash-o:before { content: "\f123"; }
.fa-undo:before { content: "\f124"; }
.fa-user:before { content: "\f125"; }
.fa-user-circle-o:before { content: "\f126"; }
.fa-user-plus:before { content: "\f127"; }
.fa-users:before { content: "\f128"; }
.fa-wrench:before { content: "\f129"; }
</style>
<!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
@@ -270,7 +274,7 @@
<body class="characters-off">
<div id="page" class="container">
<header>
<h1>fa-dtbl-1 contains 40 glyphs:</h1>
<h1>fa-dtbl-1 contains 42 glyphs:</h1>
<a onclick="toggleCharacters(); return false;" href="#">Toggle Preview Characters</a>
</header>
@@ -289,6 +293,19 @@
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="fa-arrow-left" class="fa-arrow-left"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-arrow-left" class="fa-arrow-left"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-arrow-left" class="fa-arrow-left"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-arrow-left" class="fa-arrow-left"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-arrow-left" class="fa-arrow-left"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-arrow-left" class="fa-arrow-left"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-arrow-left" class="fa-arrow-left"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-arrow-left" class="fa-arrow-left"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-arrow-left" class="fa-arrow-left"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-arrow-left" class="fa-arrow-left"></i></span>
</div>
<div class="preview-scale">
<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>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-arrow-left" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf101;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="fa-bars" class="fa-bars"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-bars" class="fa-bars"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-bars" class="fa-bars"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-bars" class="fa-bars"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-bars" class="fa-bars"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-bars" class="fa-bars"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-bars" class="fa-bars"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-bars" class="fa-bars"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-bars" class="fa-bars"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-bars" class="fa-bars"></i></span>
@@ -298,7 +315,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-bars" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf101;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf102;" />
</div>
</div>
@@ -311,7 +328,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-calendar" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf102;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf103;" />
</div>
</div>
@@ -324,7 +341,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-chevron-down" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf103;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf104;" />
</div>
</div>
@@ -337,7 +354,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-chevron-up" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf104;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf105;" />
</div>
</div>
@@ -350,7 +367,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-code-fork" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf105;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf106;" />
</div>
</div>
@@ -363,7 +380,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-comment" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf106;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf107;" />
</div>
</div>
@@ -376,7 +393,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-download" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf107;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf108;" />
</div>
</div>
@@ -390,7 +407,7 @@
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-exclamation-triangle" />
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-warning" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf108;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf109;" />
</div>
</div>
@@ -403,7 +420,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-eye" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf109;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10a;" />
</div>
</div>
@@ -416,7 +433,20 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-facebook-square" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10a;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10b;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="fa-file-excel-o" class="fa-file-excel-o"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-file-excel-o" class="fa-file-excel-o"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-file-excel-o" class="fa-file-excel-o"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-file-excel-o" class="fa-file-excel-o"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-file-excel-o" class="fa-file-excel-o"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-file-excel-o" class="fa-file-excel-o"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-file-excel-o" class="fa-file-excel-o"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-file-excel-o" class="fa-file-excel-o"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-file-excel-o" class="fa-file-excel-o"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-file-excel-o" class="fa-file-excel-o"></i></span>
</div>
<div class="preview-scale">
<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>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-file-excel-o" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10c;" />
</div>
</div>
@@ -430,7 +460,7 @@
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-floppy-o" />
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-save" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10b;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10d;" />
</div>
</div>
@@ -443,7 +473,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-github" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10c;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10e;" />
</div>
</div>
@@ -456,7 +486,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-globe" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10d;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10f;" />
</div>
</div>
@@ -469,7 +499,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-google" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10e;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf110;" />
</div>
</div>
@@ -482,7 +512,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-history" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10f;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf111;" />
</div>
</div>
@@ -495,20 +525,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-home" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf110;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="fa-hourglass" class="fa-hourglass"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-hourglass" class="fa-hourglass"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-hourglass" class="fa-hourglass"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-hourglass" class="fa-hourglass"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-hourglass" class="fa-hourglass"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-hourglass" class="fa-hourglass"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-hourglass" class="fa-hourglass"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-hourglass" class="fa-hourglass"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-hourglass" class="fa-hourglass"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-hourglass" class="fa-hourglass"></i></span>
</div>
<div class="preview-scale">
<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>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-hourglass" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf111;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf112;" />
</div>
</div>
@@ -521,7 +538,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-inbox" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf112;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf113;" />
</div>
</div>
@@ -534,7 +551,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-key-modern" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf113;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf114;" />
</div>
</div>
@@ -547,7 +564,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-link" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf114;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf115;" />
</div>
</div>
@@ -560,7 +577,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-moon-o" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf115;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf116;" />
</div>
</div>
@@ -573,7 +590,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-pencil" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf116;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf117;" />
</div>
</div>
@@ -586,7 +603,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-plus" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf117;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf118;" />
</div>
</div>
@@ -599,7 +616,20 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-question-circle" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf118;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf119;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-reply" class="fa-reply"></i></span>
</div>
<div class="preview-scale">
<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>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-reply" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11a;" />
</div>
</div>
@@ -612,7 +642,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-sign-in" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf119;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11b;" />
</div>
</div>
@@ -625,7 +655,20 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-sign-out" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11a;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11c;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="fa-spinner" class="fa-spinner"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-spinner" class="fa-spinner"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-spinner" class="fa-spinner"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-spinner" class="fa-spinner"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-spinner" class="fa-spinner"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-spinner" class="fa-spinner"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-spinner" class="fa-spinner"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-spinner" class="fa-spinner"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-spinner" class="fa-spinner"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-spinner" class="fa-spinner"></i></span>
</div>
<div class="preview-scale">
<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>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-spinner" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11d;" />
</div>
</div>
@@ -638,7 +681,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-star" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11b;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11e;" />
</div>
</div>
@@ -651,7 +694,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-star-o" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11c;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11f;" />
</div>
</div>
@@ -664,7 +707,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-sun-o" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11d;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf120;" />
</div>
</div>
@@ -677,7 +720,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-table" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11e;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf121;" />
</div>
</div>
@@ -690,21 +733,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-th-list" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11f;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="fa-times" class="fa-times"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-times" class="fa-times"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-times" class="fa-times"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-times" class="fa-times"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-times" class="fa-times"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-times" class="fa-times"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-times" class="fa-times"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-times" class="fa-times"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-times" class="fa-times"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-times" class="fa-times"></i></span>
</div>
<div class="preview-scale">
<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>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-times" />
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-close" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf120;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf122;" />
</div>
</div>
@@ -717,7 +746,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-trash-o" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf121;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf123;" />
</div>
</div>
@@ -730,7 +759,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-undo" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf122;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf124;" />
</div>
</div>
@@ -743,7 +772,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-user" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf123;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf125;" />
</div>
</div>
@@ -756,7 +785,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-user-circle-o" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf124;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf126;" />
</div>
</div>
@@ -769,7 +798,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-user-plus" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf125;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf127;" />
</div>
</div>
@@ -782,7 +811,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-users" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf126;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf128;" />
</div>
</div>
@@ -795,7 +824,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-wrench" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf127;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf129;" />
</div>
</div>