Update SilverStripe font icons

Added new icons
Updated license
moved location of font styles
This commit is contained in:
Paul Clarke 2016-04-21 15:39:06 +12:00
parent 560ed0b3aa
commit 35e062d9f3
9 changed files with 286 additions and 363 deletions

View File

@ -1,11 +1,27 @@
Font license info
The SilverStripe custom icon font set is a collection of hand crafted and sourced icons through http://app.fontastic.me/
Fontastic allows us to package together icons from multiple sources for use as a single set.
## Entypo
Copyright (C) 2012 by Daniel Bruce
Author: Daniel Bruce
License: Creative Commons 3.0
Homepage: http://www.entypo.com
Author: Daniel Bruce
License: SIL (http://scripts.sil.org/OFL)
Homepage: http://www.entypo.com
## Picol
Author: Melih Bilgil
License: Creative Commons 3.0
Homepage: http://picol.org/
## Foundation icons
Author: Zurb
License: Creative Commons 3.0
Homepage: http://zurb.com/playground/foundation-icons
## Font Awesome
Author: Dave Gandy
License: MIT License (MIT)
Homepage: https://fortawesome.github.io/Font-Awesome/

View File

@ -70,4 +70,6 @@
<glyph glyph-name="save" unicode="&#33;" d="M358 125c0 3 0 6 0 6l0 34c46 0 83 37 83 82 0 46-37 83-83 83-11 0-25-3-34-9l-17 17c-28 63-102 92-165 63-45-20-74-63-74-114 0-68 23-125 94-125l0-34c0-3 0-6 0-6-91 3-134 77-134 168 0 91 74 165 165 165 60 0 114-31 145-85 69 14 134-32 146-100 11-68-32-133-100-145-6 0-17 0-26 0z m-102 188l-85-114 57 0 0-171 56 0 0 171 57 0z"/>
<glyph glyph-name="rocket" unicode="&#90;" d="M102 51c35 6 74 17 91 63 0 0 0 3-2 3-15-6-29-12-43-12 0 0-3 0-3 3-3 14 0 29 3 43 0 0 0 3-3 3-43-23-48-60-51-100 6 0 6-3 8-3z m111 262c-62-6-119-37-159-83 0-2 3-2 3-2 37 11 74 11 111 5 3 0 3-3 3-8l-9-43c0-3 0-6 3-6 11-2 20-8 28-17 9-8 17-17 20-28 0-3 3-3 6-3l40 17c3 0 6 0 8-3 12-34 15-74 9-111 0-3 0-3 3-3 0 0 3 0 3 0 42 46 65 106 62 168 0 3 0 3 3 3 85 71 134 174 137 282-109-15-205-77-265-168-3 3-3 0-6 0z m148 31c17-17 20-42 3-60-17-17-43-19-60-2-20 14-20 42-5 59 17 17 42 20 62 3 0 3 0 3 0 0z"/>
<glyph glyph-name="cancel" unicode="&#68;" d="M284 256l106 105c5 6 8 9 8 14 3 12-5 20-17 23-3 0-3 0-6 0-5 0-11-3-14-5l-105-109-105 109c-6 2-12 5-14 5-12 3-20-5-23-17 0-3 0-3 0-6 0-5 3-8 5-14l109-105-109-105c-2-6-5-12-5-14 0-12 5-20 17-20 3 0 3 0 6 0 5 0 11 2 14 5l105 106 105-106c3-3 9-5 14-5 12-3 20 5 20 17 0 0 0 3 0 3 0 5-2 11-5 14z"/>
<glyph glyph-name="happy" unicode="&#34;" d="M256 0c-141 0-256 115-256 256 0 141 115 256 256 256 141 0 256-115 256-256 0-141-115-256-256-256z m0 492c-130 0-236-106-236-236 0-130 106-236 236-236 130 0 236 106 236 236-1 130-106 235-236 236z m0-369c-46 0-90 18-123 51l14 14c60-60 157-60 217 0l15-14c-33-33-77-51-123-51z m-41 194c0-11-9-20-20-20-12 0-21 9-21 20 0 12 9 21 21 21 11 0 20-9 20-21z m123 0c0-11-9-20-21-20-11 0-20 9-20 20 0 12 9 21 20 21 12 0 21-9 21-21z"/>
<glyph glyph-name="sad" unicode="&#35;" d="M256 0c-141 0-256 115-256 256 0 141 115 256 256 256 141 0 256-115 256-256 0-141-115-256-256-256z m0 492c-130 0-236-106-236-236 0-130 106-236 236-236 130 0 236 106 236 236-1 130-106 235-236 236z m109-366c-60 60-158 60-218 0l-14 14c68 68 178 68 246 0z m-150 191c0-11-9-20-20-20-12 0-21 9-21 20 0 12 9 21 21 21 11 0 20-9 20-21z m123 0c0-11-9-20-21-20-11 0-20 9-20 20 0 12 9 21 20 21 12 0 21-9 21-21z"/>
</font></defs></svg>

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

View File

@ -6,249 +6,19 @@
<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-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-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";
}
.font-icon-dot-3:before {
content: "\39";
}
.font-icon-save:before {
content: "\21";
}
.font-icon-rocket:before {
content: "\5a";
}
.font-icon-cancel:before {
content: "\44";
}
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>
<link rel="stylesheet" href="icon-styles.css">
<style type="text/css">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>
<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">
@ -269,10 +39,6 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
<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">
@ -286,8 +52,8 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
<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">
<div class="icon font-icon-tree"></div>
<input type="text" readonly="readonly" value="tree">
</li>
<li>
<div class="icon font-icon-flow-tree"></div>
@ -325,10 +91,6 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
<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">
@ -349,10 +111,6 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
<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">
@ -369,10 +127,6 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
<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">
@ -381,6 +135,10 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
<div class="icon font-icon-cog"></div>
<input type="text" readonly="readonly" value="cog">
</li>
<li>
<div class="icon font-icon-fast-forward"></div>
<input type="text" readonly="readonly" value="fast-forward">
</li>
<li>
<div class="icon font-icon-install"></div>
<input type="text" readonly="readonly" value="install">
@ -417,6 +175,66 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
<div class="icon font-icon-resize"></div>
<input type="text" readonly="readonly" value="resize">
</li>
<li>
<div class="icon font-icon-pencil"></div>
<input type="text" readonly="readonly" value="pencil">
</li>
<li>
<div class="icon font-icon-trash"></div>
<input type="text" readonly="readonly" value="trash">
</li>
<li>
<div class="icon font-icon-edit"></div>
<input type="text" readonly="readonly" value="edit">
</li>
<li>
<div class="icon font-icon-tick"></div>
<input type="text" readonly="readonly" value="tick">
</li>
<li>
<div class="icon font-icon-upload"></div>
<input type="text" readonly="readonly" value="upload">
</li>
<li>
<div class="icon font-icon-folder-add"></div>
<input type="text" readonly="readonly" value="folder-add">
</li>
<li>
<div class="icon font-icon-silverstripe"></div>
<input type="text" readonly="readonly" value="silverstripe">
</li>
<li>
<div class="icon font-icon-thumbnails"></div>
<input type="text" readonly="readonly" value="thumbnails">
</li>
<li>
<div class="icon font-icon-down-open"></div>
<input type="text" readonly="readonly" value="down-open">
</li>
<li>
<div class="icon font-icon-up-open"></div>
<input type="text" readonly="readonly" value="up-open">
</li>
<li>
<div class="icon font-icon-link"></div>
<input type="text" readonly="readonly" value="link">
</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-image"></div>
<input type="text" readonly="readonly" value="image">
</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-code"></div>
<input type="text" readonly="readonly" value="code">
</li>
<li>
<div class="icon font-icon-left-open-big"></div>
<input type="text" readonly="readonly" value="left-open-big">
@ -449,6 +267,14 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
<div class="icon font-icon-cancel"></div>
<input type="text" readonly="readonly" value="cancel">
</li>
<li>
<div class="icon font-icon-happy"></div>
<input type="text" readonly="readonly" value="happy">
</li>
<li>
<div class="icon font-icon-sad"></div>
<input type="text" readonly="readonly" value="sad">
</li>
</ul>
<h2>Character mapping</h2>
<ul class="glyphs character-mapping">
@ -456,10 +282,6 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
<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">
@ -480,10 +302,6 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
<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">
@ -536,10 +354,6 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
<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">
@ -556,18 +370,10 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
<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">
@ -584,10 +390,6 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
<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">
@ -597,8 +399,8 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
<input type="text" readonly="readonly" value="Y">
</li>
<li>
<div data-icon="Z" class="icon"></div>
<input type="text" readonly="readonly" value="Z">
<div data-icon="h" class="icon"></div>
<input type="text" readonly="readonly" value="h">
</li>
<li>
<div data-icon="a" class="icon"></div>
@ -636,6 +438,62 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
<div data-icon="L" class="icon"></div>
<input type="text" readonly="readonly" value="L">
</li>
<li>
<div data-icon="m" class="icon"></div>
<input type="text" readonly="readonly" value="m">
</li>
<li>
<div data-icon="g" class="icon"></div>
<input type="text" readonly="readonly" value="g">
</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="b" class="icon"></div>
<input type="text" readonly="readonly" value="b">
</li>
<li>
<div data-icon="S" class="icon"></div>
<input type="text" readonly="readonly" value="S">
</li>
<li>
<div data-icon="M" class="icon"></div>
<input type="text" readonly="readonly" value="M">
</li>
<li>
<div data-icon="W" class="icon"></div>
<input type="text" readonly="readonly" value="W">
</li>
<li>
<div data-icon="0" class="icon"></div>
<input type="text" readonly="readonly" value="0">
</li>
<li>
<div data-icon="1" class="icon"></div>
<input type="text" readonly="readonly" value="1">
</li>
<li>
<div data-icon="2" class="icon"></div>
<input type="text" readonly="readonly" value="2">
</li>
<li>
<div data-icon="V" class="icon"></div>
<input type="text" readonly="readonly" value="V">
</li>
<li>
<div data-icon="4" class="icon"></div>
<input type="text" readonly="readonly" value="4">
</li>
<li>
<div data-icon="P" class="icon"></div>
<input type="text" readonly="readonly" value="P">
</li>
<li>
<div data-icon="3" class="icon"></div>
<input type="text" readonly="readonly" value="3">
@ -672,14 +530,22 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
<div data-icon="D" class="icon"></div>
<input type="text" readonly="readonly" value="D">
</li>
<li>
<div data-icon="&#34;" class="icon"></div>
<input type="text" readonly="readonly" value="&quot;">
</li>
<li>
<div data-icon="#" class="icon"></div>
<input type="text" readonly="readonly" value="#">
</li>
</ul>
</div><script type="text/javascript">
(function() {
var glyphs, _i, _len, _ref;
</div>
<script>(function() {
var glyphs, i, len, ref;
_ref = document.getElementsByClassName('glyphs');
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
glyphs = _ref[_i];
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();
@ -688,6 +554,7 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
}
}).call(this);
</script>
</script>
</body>
</html>

View File

@ -2,18 +2,31 @@
@font-face {
font-family: "silverstripe";
src:url("../font/silverstripe.eot");
src:url("../font/silverstripe.eot?#iefix") format("embedded-opentype"),
url("../font/silverstripe.woff") format("woff"),
url("../font/silverstripe.ttf") format("truetype"),
url("../font/silverstripe.svg#silverstripe") format("svg");
src:url("fonts/silverstripe.eot");
src:url("fonts/silverstripe.eot?#iefix") format("embedded-opentype"),
url("fonts/silverstripe.woff") format("woff"),
url("fonts/silverstripe.ttf") format("truetype"),
url("fonts/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 {
[class*=" font-icon-"]:before {
font-family: "silverstripe" !important;
font-style: normal !important;
font-weight: normal !important;
@ -26,160 +39,181 @@
}
.font-icon-search:before {
content: "s";
}
.font-icon-upload:before {
content: "b";
content: "\73";
}
.font-icon-sync:before {
content: "c";
content: "\63";
}
.font-icon-print:before {
content: "d";
content: "\64";
}
.font-icon-list:before {
content: "e";
content: "\65";
}
.font-icon-plus-circled:before {
content: "f";
content: "\66";
}
.font-icon-check-mark-2:before {
content: "k";
}
.font-icon-pencil:before {
content: "m";
content: "\6b";
}
.font-icon-book:before {
content: "n";
content: "\6e";
}
.font-icon-book-open:before {
content: "o";
content: "\6f";
}
.font-icon-plus:before {
content: "j";
content: "\6a";
}
.font-icon-icon-tree:before {
content: "p";
.font-icon-tree:before {
content: "\70";
}
.font-icon-flow-tree:before {
content: "q";
content: "\71";
}
.font-icon-info-circled:before {
content: "y";
content: "\79";
}
.font-icon-chart-line:before {
content: "B";
content: "\42";
}
.font-icon-graph-bar:before {
content: "E";
content: "\45";
}
.font-icon-torsos-all:before {
content: "F";
content: "\46";
}
.font-icon-torso:before {
content: "H";
content: "\48";
}
.font-icon-picture:before {
content: "v";
content: "\76";
}
.font-icon-chart-pie:before {
content: "A";
content: "\41";
}
.font-icon-sitemap:before {
content: "C";
}
.font-icon-globe:before {
content: "P";
content: "\43";
}
.font-icon-globe-1:before {
content: "R";
content: "\52";
}
.font-icon-chat:before {
content: "t";
content: "\74";
}
.font-icon-comment:before {
content: "w";
content: "\77";
}
.font-icon-logout:before {
content: "z";
content: "\7a";
}
.font-icon-cancel-circled:before {
content: "Q";
}
.font-icon-trash-bin:before {
content: "S";
content: "\51";
}
.font-icon-left-open:before {
content: "T";
content: "\54";
}
.font-icon-right-open:before {
content: "U";
content: "\55";
}
.font-icon-check-mark:before {
content: "G";
content: "\47";
}
.font-icon-check-mark-circle:before {
content: "I";
}
.font-icon-level-up:before {
content: "V";
content: "\49";
}
.font-icon-back-in-time:before {
content: "X";
content: "\58";
}
.font-icon-cog:before {
content: "Y";
content: "\59";
}
.font-icon-fast-forward:before {
content: "\68";
}
.font-icon-install:before {
content: "a";
content: "\61";
}
.font-icon-down-circled:before {
content: "i";
content: "\69";
}
.font-icon-eye:before {
content: "l";
content: "\6c";
}
.font-icon-columns:before {
content: "r";
content: "\72";
}
.font-icon-edit-write:before {
content: "u";
content: "\75";
}
.font-icon-monitor:before {
content: "x";
content: "\78";
}
.font-icon-mobile:before {
content: "J";
content: "\4a";
}
.font-icon-tablet:before {
content: "K";
content: "\4b";
}
.font-icon-resize:before {
content: "L";
}
.font-icon-silverstripe:before {
content: "M";
content: "\4c";
}
.font-icon-pencil:before {
content: "m";
content: "\6d";
}
.font-icon-trash:before {
content: "g";
content: "\67";
}
.font-icon-edit:before {
content: "N";
content: "\4e";
}
.font-icon-tick:before {
content: "O";
content: "\4f";
}
.font-icon-upload:before {
content: "\62";
}
.font-icon-folder-add:before {
content: "S";
content: "\53";
}
.font-icon-silverstripe:before {
content: "\4d";
}
.font-icon-thumbnails:before {
content: "W";
content: "\57";
}
.font-icon-down-open:before {
content: "\30";
}
.font-icon-up-open:before {
content: "\31";
}
.font-icon-link:before {
content: "2";
content: "\32";
}
.font-icon-level-up:before {
content: "\56";
}
.font-icon-image:before {
content: "\34";
}
.font-icon-trash-bin:before {
content: "\50";
}
.font-icon-code:before {
content: "\33";
}
.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";
}
.font-icon-dot-3:before {
content: "\39";
@ -193,3 +227,9 @@
.font-icon-cancel:before {
content: "\44";
}
.font-icon-happy:before {
content: "\22";
}
.font-icon-sad:before {
content: "\23";
}

Binary file not shown.

View File

@ -7,15 +7,13 @@
// Base
@import "typography";
@import "styles";
@import "../../dist/font/icon-styles.css";
// Legacy
@import "legacy/sprity";
@import "legacy/sprites";
@import "legacy/mixins";
@import "legacy/themes/default";
@import "legacy/fonts";
@import "legacy/typography";
@import "legacy/uitheme";
@import "legacy/forms";
@import "legacy/style";