share-selected-text

<!DOCTYPE html> <html> <head> <title>sst_icons glyphs preview</title> <style> /* Page Styles */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } body { background: #fff; color: #444; font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; } a, a:visited { color: #888; text-decoration: underline; } a:hover, a:focus { color: #000; } header { border-bottom: 2px solid #ddd; margin-bottom: 20px; overflow: hidden; padding: 20px 0; } header h1 { color: #888; float: left; font-size: 36px; font-weight: 300; } header a { float: right; font-size: 14px; } .container { margin: 0 auto; max-width: 1200px; min-width: 960px; padding: 0 40px; width: 90%; } .glyph { border-bottom: 1px dotted #ccc; padding: 10px 0 20px; margin-bottom: 20px; } .preview-glyphs { vertical-align: bottom; } .preview-scale { color: #888; font-size: 12px; margin-top: 5px; } .step { display: inline-block; line-height: 1; position: relative; width: 10%; } .step .letters, .step i { -webkit-transition: opacity .3s; -moz-transition: opacity .3s; -ms-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s; } .step:hover .letters { opacity: 1; } .step:hover i { opacity: .3; } .letters { opacity: .3; position: absolute; } .characters-off .letters { display: none; } .characters-off .step:hover i { opacity: 1; } .size-12 { font-size: 12px; } .size-14 { font-size: 14px; } .size-16 { font-size: 16px; } .size-18 { font-size: 18px; } .size-21 { font-size: 21px; } .size-24 { font-size: 24px; } .size-36 { font-size: 36px; } .size-48 { font-size: 48px; } .size-60 { font-size: 60px; } .size-72 { font-size: 72px; } .usage { margin-top: 10px; } .usage input { font-family: monospace; margin-right: 3px; padding: 2px 5px; text-align: center; } .usage .point { width: 150px; } .usage .class { width: 250px; } footer { color: #888; font-size: 12px; padding: 20px 0; } /* Icon Font: sst_icons */ @font-face { font-family: "sst_icons"; src: url("../fonts/sst_icons.eot"); src: url("../fonts/sst_icons.eot?#iefix") format("embedded-opentype"), url("../fonts/sst_icons.woff") format("woff"), url("../fonts/sst_icons.ttf") format("truetype"), url("../fonts/sst_icons.svg#sst_icons") format("svg"); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: "sst_icons"; src: url("../fonts/sst_icons.svg#sst_icons") format("svg"); } } [data-icon]:before { content: attr(data-icon); } [data-icon]:before, .icon-sst-buffer:before, .icon-sst-digg:before, .icon-sst-facebook:before, .icon-sst-linkedin:before, .icon-sst-reddit:before, .icon-sst-stumbleupon:before, .icon-sst-tumblr:before, .icon-sst-twitter:before { display: inline-block; font-family: "sst_icons"; font-style: normal; font-weight: normal; font-variant: normal; line-height: 1; text-decoration: inherit; text-rendering: optimizeLegibility; text-transform: none; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } .icon-sst-buffer:before { content: "\f108"; } .icon-sst-digg:before { content: "\f109"; } .icon-sst-facebook:before { content: "\f10f"; } .icon-sst-linkedin:before { content: "\f10a"; } .icon-sst-reddit:before { content: "\f10b"; } .icon-sst-stumbleupon:before { content: "\f10c"; } .icon-sst-tumblr:before { content: "\f10d"; } .icon-sst-twitter:before { content: "\f10e"; } </style>  <script> function toggleCharacters() { var body = document.getElementsByTagName('body')[0]; body.className = body.className === 'characters-off' ? '' : 'characters-off'; } </script> </head> <body class="characters-off"> <div id="page" class="container"> <header> <h1>sst_icons contains 8 glyphs:</h1> <a onclick="toggleCharacters(); return false;" href="#">Toggle Preview Characters</a> </header> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-sst-buffer" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf108;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-sst-digg" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf109;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-sst-facebook" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf10f;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-sst-linkedin" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf10a;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-sst-reddit" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf10b;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-sst-stumbleupon" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf10c;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-sst-tumblr" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf10d;" /> </div> </div> <div class="glyph"> <div class="preview-glyphs"> PpPpPpPpPpPpPpPpPpPp </div> <div class="preview-scale"> 12141618212436486072 </div> <div class="usage"> <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-sst-twitter" /> <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&#xf10e;" /> </div> </div> <footer> Made with love using <a href="http://fontcustom.com">Font Custom</a>. </footer> </div> </body> </html>