<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Font Reference - SilverStripe</title> <link href="http://fonts.googleapis.com/css?family=Dosis:400,500,700" rel="stylesheet" type="text/css"> <style type="text/css"> @charset "UTF-8"; @font-face { font-family: "silverstripe"; src:url("silverstripe.eot"); src:url("silverstripe.eot?#iefix") format("embedded-opentype"), url("silverstripe.woff") format("woff"), url("silverstripe.ttf") format("truetype"), url("silverstripe.svg#silverstripe") format("svg"); font-weight: normal; font-style: normal; } [data-icon]:before { font-family: "silverstripe" !important; content: attr(data-icon); font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class^="font-icon-"]:before, [class*="font-icon-"]:before { font-family: "silverstripe" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .font-icon-search:before { content: "s"; } .font-icon-upload:before { content: "b"; } .font-icon-sync:before { content: "c"; } .font-icon-print:before { content: "d"; } .font-icon-list:before { content: "e"; } .font-icon-plus-circled:before { content: "f"; } .font-icon-check-mark-2:before { content: "k"; } .font-icon-pencil:before { content: "m"; } .font-icon-book:before { content: "n"; } .font-icon-book-open:before { content: "o"; } .font-icon-plus:before { content: "j"; } .font-icon-icon-tree:before { content: "p"; } .font-icon-flow-tree:before { content: "q"; } .font-icon-info-circled:before { content: "y"; } .font-icon-chart-line:before { content: "B"; } .font-icon-graph-bar:before { content: "E"; } .font-icon-torsos-all:before { content: "F"; } .font-icon-torso:before { content: "H"; } .font-icon-picture:before { content: "v"; } .font-icon-chart-pie:before { content: "A"; } .font-icon-sitemap:before { content: "C"; } .font-icon-globe:before { content: "P"; } .font-icon-globe-1:before { content: "R"; } .font-icon-chat:before { content: "t"; } .font-icon-comment:before { content: "w"; } .font-icon-logout:before { content: "z"; } .font-icon-cancel:before { content: "D"; } .font-icon-cancel-circled:before { content: "Q"; } .font-icon-trash-bin:before { content: "S"; } .font-icon-left-open:before { content: "T"; } .font-icon-right-open:before { content: "U"; } .font-icon-check-mark:before { content: "G"; } .font-icon-check-mark-circle:before { content: "I"; } .font-icon-level-up:before { content: "V"; } .font-icon-back-in-time:before { content: "X"; } .font-icon-cog:before { content: "Y"; } .font-icon-rocket:before { content: "Z"; } .font-icon-install:before { content: "a"; } .font-icon-down-circled:before { content: "i"; } .font-icon-eye:before { content: "l"; } .font-icon-columns:before { content: "r"; } .font-icon-edit-write:before { content: "u"; } .font-icon-monitor:before { content: "x"; } .font-icon-mobile:before { content: "J"; } .font-icon-tablet:before { content: "K"; } .font-icon-resize:before { content: "L"; } .font-icon-left-open-big:before { content: "\35"; } .font-icon-down-open-big:before { content: "\36"; } .font-icon-up-open-big:before { content: "\37"; } .font-icon-right-open-big:before { content: "\38"; } html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;font-size:100%;vertical-align:baseline} body{line-height:1;color:#000;background:#fff} ol,ul{list-style:none} table{border-collapse:separate;border-spacing:0;vertical-align:middle} caption,th,td{text-align:left;font-weight:normal;vertical-align:middle} a img{border:none} *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} body{font-family:'Dosis','Tahoma',sans-serif} .container{margin:15px auto;width:80%} h1{margin:40px 0 20px;font-weight:700;font-size:38px;line-height:32px;color:#fb565e} h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercase;font-weight:500} .small{font-size:14px;color:#a5adb4;} .small a{color:#a5adb4;} .small a:hover{color:#fb565e} .glyphs.character-mapping{margin:0 0 20px 0;padding:20px 0 20px 30px;color:rgba(0,0,0,0.5);border:1px solid #d8e0e5;-webkit-border-radius:3px;border-radius:3px;} .glyphs.character-mapping li{margin:0 30px 20px 0;display:inline-block;width:90px} .glyphs.character-mapping .icon{margin:10px 0 10px 15px;padding:15px;position:relative;width:55px;height:55px;color:#162a36 !important;overflow:hidden;-webkit-border-radius:3px;border-radius:3px;font-size:32px;} .glyphs.character-mapping .icon svg{fill:#000} .glyphs.character-mapping input{margin:0;padding:5px 0;line-height:12px;font-size:12px;display:block;width:100%;border:1px solid #d8e0e5;-webkit-border-radius:5px;border-radius:5px;text-align:center;outline:0;} .glyphs.character-mapping input:focus{border:1px solid #fbde4a;-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a} .glyphs.character-mapping input:hover{-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a} .glyphs.css-mapping{margin:0 0 60px 0;padding:30px 0 20px 30px;color:rgba(0,0,0,0.5);border:1px solid #d8e0e5;-webkit-border-radius:3px;border-radius:3px;} .glyphs.css-mapping li{margin:0 30px 20px 0;padding:0;display:inline-block;overflow:hidden} .glyphs.css-mapping .icon{margin:0;margin-right:10px;padding:13px;height:50px;width:50px;color:#162a36 !important;overflow:hidden;float:left;font-size:24px} .glyphs.css-mapping input{margin:0;margin-top:5px;padding:8px;line-height:16px;font-size:16px;display:block;width:150px;height:40px;border:1px solid #d8e0e5;-webkit-border-radius:5px;border-radius:5px;background:#fff;outline:0;float:right;} .glyphs.css-mapping input:focus{border:1px solid #fbde4a;-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a} .glyphs.css-mapping input:hover{-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a} </style> </head> <body> <div class="container"> <h1>SilverStripe</h1> <p class="small">This font was created with <a href="http://fontastic.me/">Fontastic</a></p> <h2>CSS mapping</h2> <ul class="glyphs css-mapping"> <li> <div class="icon font-icon-search"></div> <input type="text" readonly="readonly" value="search"> </li> <li> <div class="icon font-icon-upload"></div> <input type="text" readonly="readonly" value="upload"> </li> <li> <div class="icon font-icon-sync"></div> <input type="text" readonly="readonly" value="sync"> </li> <li> <div class="icon font-icon-print"></div> <input type="text" readonly="readonly" value="print"> </li> <li> <div class="icon font-icon-list"></div> <input type="text" readonly="readonly" value="list"> </li> <li> <div class="icon font-icon-plus-circled"></div> <input type="text" readonly="readonly" value="plus-circled"> </li> <li> <div class="icon font-icon-check-mark-2"></div> <input type="text" readonly="readonly" value="check-mark-2"> </li> <li> <div class="icon font-icon-pencil"></div> <input type="text" readonly="readonly" value="pencil"> </li> <li> <div class="icon font-icon-book"></div> <input type="text" readonly="readonly" value="book"> </li> <li> <div class="icon font-icon-book-open"></div> <input type="text" readonly="readonly" value="book-open"> </li> <li> <div class="icon font-icon-plus"></div> <input type="text" readonly="readonly" value="plus"> </li> <li> <div class="icon font-icon-icon-tree"></div> <input type="text" readonly="readonly" value="icon-tree"> </li> <li> <div class="icon font-icon-flow-tree"></div> <input type="text" readonly="readonly" value="flow-tree"> </li> <li> <div class="icon font-icon-info-circled"></div> <input type="text" readonly="readonly" value="info-circled"> </li> <li> <div class="icon font-icon-chart-line"></div> <input type="text" readonly="readonly" value="chart-line"> </li> <li> <div class="icon font-icon-graph-bar"></div> <input type="text" readonly="readonly" value="graph-bar"> </li> <li> <div class="icon font-icon-torsos-all"></div> <input type="text" readonly="readonly" value="torsos-all"> </li> <li> <div class="icon font-icon-torso"></div> <input type="text" readonly="readonly" value="torso"> </li> <li> <div class="icon font-icon-picture"></div> <input type="text" readonly="readonly" value="picture"> </li> <li> <div class="icon font-icon-chart-pie"></div> <input type="text" readonly="readonly" value="chart-pie"> </li> <li> <div class="icon font-icon-sitemap"></div> <input type="text" readonly="readonly" value="sitemap"> </li> <li> <div class="icon font-icon-globe"></div> <input type="text" readonly="readonly" value="globe"> </li> <li> <div class="icon font-icon-globe-1"></div> <input type="text" readonly="readonly" value="globe-1"> </li> <li> <div class="icon font-icon-chat"></div> <input type="text" readonly="readonly" value="chat"> </li> <li> <div class="icon font-icon-comment"></div> <input type="text" readonly="readonly" value="comment"> </li> <li> <div class="icon font-icon-logout"></div> <input type="text" readonly="readonly" value="logout"> </li> <li> <div class="icon font-icon-cancel"></div> <input type="text" readonly="readonly" value="cancel"> </li> <li> <div class="icon font-icon-cancel-circled"></div> <input type="text" readonly="readonly" value="cancel-circled"> </li> <li> <div class="icon font-icon-trash-bin"></div> <input type="text" readonly="readonly" value="trash-bin"> </li> <li> <div class="icon font-icon-left-open"></div> <input type="text" readonly="readonly" value="left-open"> </li> <li> <div class="icon font-icon-right-open"></div> <input type="text" readonly="readonly" value="right-open"> </li> <li> <div class="icon font-icon-check-mark"></div> <input type="text" readonly="readonly" value="check-mark"> </li> <li> <div class="icon font-icon-check-mark-circle"></div> <input type="text" readonly="readonly" value="check-mark-circle"> </li> <li> <div class="icon font-icon-level-up"></div> <input type="text" readonly="readonly" value="level-up"> </li> <li> <div class="icon font-icon-back-in-time"></div> <input type="text" readonly="readonly" value="back-in-time"> </li> <li> <div class="icon font-icon-cog"></div> <input type="text" readonly="readonly" value="cog"> </li> <li> <div class="icon font-icon-rocket"></div> <input type="text" readonly="readonly" value="rocket"> </li> <li> <div class="icon font-icon-install"></div> <input type="text" readonly="readonly" value="install"> </li> <li> <div class="icon font-icon-down-circled"></div> <input type="text" readonly="readonly" value="down-circled"> </li> <li> <div class="icon font-icon-eye"></div> <input type="text" readonly="readonly" value="eye"> </li> <li> <div class="icon font-icon-columns"></div> <input type="text" readonly="readonly" value="columns"> </li> <li> <div class="icon font-icon-edit-write"></div> <input type="text" readonly="readonly" value="edit-write"> </li> <li> <div class="icon font-icon-monitor"></div> <input type="text" readonly="readonly" value="monitor"> </li> <li> <div class="icon font-icon-mobile"></div> <input type="text" readonly="readonly" value="mobile"> </li> <li> <div class="icon font-icon-tablet"></div> <input type="text" readonly="readonly" value="tablet"> </li> <li> <div class="icon font-icon-resize"></div> <input type="text" readonly="readonly" value="resize"> </li> <li> <div class="icon font-icon-left-open-big"></div> <input type="text" readonly="readonly" value="left-open-big"> </li> <li> <div class="icon font-icon-down-open-big"></div> <input type="text" readonly="readonly" value="down-open-big"> </li> <li> <div class="icon font-icon-up-open-big"></div> <input type="text" readonly="readonly" value="up-open-big"> </li> <li> <div class="icon font-icon-right-open-big"></div> <input type="text" readonly="readonly" value="right-open-big"> </li> </ul> <h2>Character mapping</h2> <ul class="glyphs character-mapping"> <li> <div data-icon="s" class="icon"></div> <input type="text" readonly="readonly" value="s"> </li> <li> <div data-icon="b" class="icon"></div> <input type="text" readonly="readonly" value="b"> </li> <li> <div data-icon="c" class="icon"></div> <input type="text" readonly="readonly" value="c"> </li> <li> <div data-icon="d" class="icon"></div> <input type="text" readonly="readonly" value="d"> </li> <li> <div data-icon="e" class="icon"></div> <input type="text" readonly="readonly" value="e"> </li> <li> <div data-icon="f" class="icon"></div> <input type="text" readonly="readonly" value="f"> </li> <li> <div data-icon="k" class="icon"></div> <input type="text" readonly="readonly" value="k"> </li> <li> <div data-icon="m" class="icon"></div> <input type="text" readonly="readonly" value="m"> </li> <li> <div data-icon="n" class="icon"></div> <input type="text" readonly="readonly" value="n"> </li> <li> <div data-icon="o" class="icon"></div> <input type="text" readonly="readonly" value="o"> </li> <li> <div data-icon="j" class="icon"></div> <input type="text" readonly="readonly" value="j"> </li> <li> <div data-icon="p" class="icon"></div> <input type="text" readonly="readonly" value="p"> </li> <li> <div data-icon="q" class="icon"></div> <input type="text" readonly="readonly" value="q"> </li> <li> <div data-icon="y" class="icon"></div> <input type="text" readonly="readonly" value="y"> </li> <li> <div data-icon="B" class="icon"></div> <input type="text" readonly="readonly" value="B"> </li> <li> <div data-icon="E" class="icon"></div> <input type="text" readonly="readonly" value="E"> </li> <li> <div data-icon="F" class="icon"></div> <input type="text" readonly="readonly" value="F"> </li> <li> <div data-icon="H" class="icon"></div> <input type="text" readonly="readonly" value="H"> </li> <li> <div data-icon="v" class="icon"></div> <input type="text" readonly="readonly" value="v"> </li> <li> <div data-icon="A" class="icon"></div> <input type="text" readonly="readonly" value="A"> </li> <li> <div data-icon="C" class="icon"></div> <input type="text" readonly="readonly" value="C"> </li> <li> <div data-icon="P" class="icon"></div> <input type="text" readonly="readonly" value="P"> </li> <li> <div data-icon="R" class="icon"></div> <input type="text" readonly="readonly" value="R"> </li> <li> <div data-icon="t" class="icon"></div> <input type="text" readonly="readonly" value="t"> </li> <li> <div data-icon="w" class="icon"></div> <input type="text" readonly="readonly" value="w"> </li> <li> <div data-icon="z" class="icon"></div> <input type="text" readonly="readonly" value="z"> </li> <li> <div data-icon="D" class="icon"></div> <input type="text" readonly="readonly" value="D"> </li> <li> <div data-icon="Q" class="icon"></div> <input type="text" readonly="readonly" value="Q"> </li> <li> <div data-icon="S" class="icon"></div> <input type="text" readonly="readonly" value="S"> </li> <li> <div data-icon="T" class="icon"></div> <input type="text" readonly="readonly" value="T"> </li> <li> <div data-icon="U" class="icon"></div> <input type="text" readonly="readonly" value="U"> </li> <li> <div data-icon="G" class="icon"></div> <input type="text" readonly="readonly" value="G"> </li> <li> <div data-icon="I" class="icon"></div> <input type="text" readonly="readonly" value="I"> </li> <li> <div data-icon="V" class="icon"></div> <input type="text" readonly="readonly" value="V"> </li> <li> <div data-icon="X" class="icon"></div> <input type="text" readonly="readonly" value="X"> </li> <li> <div data-icon="Y" class="icon"></div> <input type="text" readonly="readonly" value="Y"> </li> <li> <div data-icon="Z" class="icon"></div> <input type="text" readonly="readonly" value="Z"> </li> <li> <div data-icon="a" class="icon"></div> <input type="text" readonly="readonly" value="a"> </li> <li> <div data-icon="i" class="icon"></div> <input type="text" readonly="readonly" value="i"> </li> <li> <div data-icon="l" class="icon"></div> <input type="text" readonly="readonly" value="l"> </li> <li> <div data-icon="r" class="icon"></div> <input type="text" readonly="readonly" value="r"> </li> <li> <div data-icon="u" class="icon"></div> <input type="text" readonly="readonly" value="u"> </li> <li> <div data-icon="x" class="icon"></div> <input type="text" readonly="readonly" value="x"> </li> <li> <div data-icon="J" class="icon"></div> <input type="text" readonly="readonly" value="J"> </li> <li> <div data-icon="K" class="icon"></div> <input type="text" readonly="readonly" value="K"> </li> <li> <div data-icon="L" class="icon"></div> <input type="text" readonly="readonly" value="L"> </li> <li> <div data-icon="3" class="icon"></div> <input type="text" readonly="readonly" value="3"> </li> <li> <div data-icon="5" class="icon"></div> <input type="text" readonly="readonly" value="5"> </li> <li> <div data-icon="6" class="icon"></div> <input type="text" readonly="readonly" value="6"> </li> <li> <div data-icon="7" class="icon"></div> <input type="text" readonly="readonly" value="7"> </li> <li> <div data-icon="8" class="icon"></div> <input type="text" readonly="readonly" value="8"> </li> </ul> </div><script type="text/javascript"> (function() { var glyphs, _i, _len, _ref; _ref = document.getElementsByClassName('glyphs'); for (_i = 0, _len = _ref.length; _i < _len; _i++) { glyphs = _ref[_i]; glyphs.addEventListener('click', function(event) { if (event.target.tagName === 'INPUT') { return event.target.select(); } }); } }).call(this); </script> </body> </html>