Skip to content

Commit 85dc45f

Browse files
donparkdonpark
committed
suit icons created using icomoon
1 parent 5e9c46f commit 85dc45f

File tree

9 files changed

+239
-0
lines changed

9 files changed

+239
-0
lines changed

‎assets/iconmoon-suit.json

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎assets/iconmoon-suit/fonts/suit.eot

1.86 KB
Binary file not shown.

‎assets/iconmoon-suit/fonts/suit.svg

Lines changed: 28 additions & 0 deletions
Loading

‎assets/iconmoon-suit/fonts/suit.ttf

1.71 KB
Binary file not shown.

‎assets/iconmoon-suit/fonts/suit.woff

1.74 KB
Binary file not shown.

‎assets/iconmoon-suit/index.html

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Your Font/Glyphs</title>
5+
<link rel="stylesheet" href="style.css" />
6+
<!--[if lte IE 7]><script src="lte-ie7.js"></script><![endif]-->
7+
<style>
8+
section, header, footer {display: block;}
9+
body {
10+
font-family: sans-serif;
11+
color: #444;
12+
line-height: 1.5;
13+
font-size: 1em;
14+
}
15+
* {
16+
-moz-box-sizing: border-box;
17+
-webkit-box-sizing: border-box;
18+
box-sizing: border-box;
19+
margin: 0;
20+
paddin: 0;
21+
}
22+
.glyph {
23+
float: left;
24+
text-align: center;
25+
background: #eee;
26+
padding: .75em;
27+
margin: .75em 1.5em .75em 0;
28+
width: 7em;
29+
border-radius: .375em;
30+
box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px #ccc;
31+
}
32+
.glyph input {
33+
width: 100%;
34+
text-align: center;
35+
font-family: consolas, monospace;
36+
}
37+
.glyph input, .mtm {
38+
margin-top: .75em;
39+
}
40+
.w-main {
41+
width: 80%;
42+
}
43+
.centered {
44+
margin-left: auto;
45+
margin-right: auto;
46+
}
47+
.fs1 {
48+
font-size: 2em;
49+
}
50+
header {
51+
margin: 2em 0;
52+
padding-bottom: .5em;
53+
color: #666;
54+
box-shadow: 0 2px #eee;
55+
}
56+
header h1 {
57+
font-size: 2em;
58+
font-weight: normal;
59+
}
60+
.clearfix:before, .clearfix:after { content: ""; display: table; }
61+
.clearfix:after, .clear { clear: both; }
62+
footer {
63+
margin-top: 2em;
64+
padding: .5em 0;
65+
box-shadow: 0 -2px #eee;
66+
}
67+
a, a:visited {
68+
color: #B35047;
69+
text-decoration: none;
70+
}
71+
a:hover, a:focus {color: #000;}
72+
.box1 {
73+
display: inline-block;
74+
width: 15em;
75+
padding: .25em .5em;
76+
background: #eee;
77+
margin: .5em 1em .5em 0;
78+
}
79+
</style>
80+
</head>
81+
<body>
82+
<div class="w-main centered">
83+
<section class="mtm clearfix" id="glyphs">
84+
<header>
85+
<h1>Your font contains the following glyphs</h1>
86+
<p>The generated SVG font can be imported back to <a href="http://icomoon.io/app">IcoMoon</a> for modification.</p>
87+
</header>
88+
<div class="glyph">
89+
<div class="fs1" aria-hidden="true" data-icon="&#x2660;"></div>
90+
<input type="text" readonly="readonly" value="&amp;#x2660;" />
91+
</div>
92+
<div class="glyph">
93+
<div class="fs1" aria-hidden="true" data-icon="&#x2663;"></div>
94+
<input type="text" readonly="readonly" value="&amp;#x2663;" />
95+
</div>
96+
<div class="glyph">
97+
<div class="fs1" aria-hidden="true" data-icon="&#x2666;"></div>
98+
<input type="text" readonly="readonly" value="&amp;#x2666;" />
99+
</div>
100+
<div class="glyph">
101+
<div class="fs1" aria-hidden="true" data-icon="&#x2665;"></div>
102+
<input type="text" readonly="readonly" value="&amp;#x2665;" />
103+
</div>
104+
</section>
105+
<div class="clear"></div>
106+
<section class="mtm clearfix" id="glyphs">
107+
<header>
108+
<h1>CSS Class Names</h1>
109+
</header>
110+
<span class="box1">
111+
<span aria-hidden="true" class="icon-suit-spades"></span>
112+
&nbsp;icon-suit-spades
113+
</span>
114+
<span class="box1">
115+
<span aria-hidden="true" class="icon-suit-clubs"></span>
116+
&nbsp;icon-suit-clubs
117+
</span>
118+
<span class="box1">
119+
<span aria-hidden="true" class="icon-suit-diamonds"></span>
120+
&nbsp;icon-suit-diamonds
121+
</span>
122+
<span class="box1">
123+
<span aria-hidden="true" class="icon-suit-heart"></span>
124+
&nbsp;icon-suit-heart
125+
</span>
126+
</section>
127+
<footer>
128+
<p>Generated by <a href="http://icomoon.io">IcoMoon.io</a></p>
129+
</footer>
130+
</div>
131+
<script>
132+
document.getElementById("glyphs").addEventListener("click", function(e) {
133+
var target = e.target;
134+
if (target.tagName === "INPUT") {
135+
target.select();
136+
}
137+
});
138+
</script>
139+
</body>
140+
</html>

‎assets/iconmoon-suit/license.txt

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
Icon Set: IcoMoon (limited) -- http://keyamoon.com/icomoon/
2+
License: CC BY-SA 3.0 -- http://creativecommons.org/licenses/by-sa/3.0/

‎assets/iconmoon-suit/lte-ie7.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/* Use this script if you need to support IE 7 and IE 6. */
2+
3+
window.onload = function() {
4+
function addIcon(el, entity) {
5+
var html = el.innerHTML;
6+
el.innerHTML = '<span style="font-family: \'suit\'">' + entity + '</span>' + html;
7+
}
8+
var icons = {
9+
'icon-suit-spades' : '&#x2660;',
10+
'icon-suit-clubs' : '&#x2663;',
11+
'icon-suit-diamonds' : '&#x2666;',
12+
'icon-suit-heart' : '&#x2665;'
13+
},
14+
els = document.getElementsByTagName('*'),
15+
i, attr, html, c, el;
16+
for (i = 0; i < els.length; i += 1) {
17+
el = els[i];
18+
attr = el.getAttribute('data-icon');
19+
if (attr) {
20+
addIcon(el, attr);
21+
}
22+
c = el.className;
23+
c = c.match(/icon-suit-[^\s'"]+/);
24+
if (c) {
25+
addIcon(el, icons[c[0]]);
26+
}
27+
}
28+
};

‎assets/iconmoon-suit/style.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
@font-face {
2+
font-family: 'suit';
3+
src:url('fonts/suit.eot');
4+
src:url('fonts/suit.eot?#iefix') format('embedded-opentype'),
5+
url('fonts/suit.svg#suit') format('svg'),
6+
url('fonts/suit.woff') format('woff'),
7+
url('fonts/suit.ttf') format('truetype');
8+
font-weight: normal;
9+
font-style: normal;
10+
}
11+
12+
/* Use the following CSS code if you want to use data attributes for inserting your icons */
13+
[data-icon]:before {
14+
font-family: 'suit';
15+
content: attr(data-icon);
16+
speak: none;
17+
font-weight: normal;
18+
-webkit-font-smoothing: antialiased;
19+
}
20+
21+
/* Use the following CSS code if you want to have a class per icon */
22+
[class^="icon-suit-"]:before, [class*=" icon-suit-"]:before {
23+
font-family: 'suit';
24+
font-style: normal;
25+
speak: none;
26+
font-weight: normal;
27+
-webkit-font-smoothing: antialiased;
28+
}
29+
.icon-suit-spades:before {
30+
content: "\2660";
31+
}
32+
.icon-suit-clubs:before {
33+
content: "\2663";
34+
}
35+
.icon-suit-diamonds:before {
36+
content: "\2666";
37+
}
38+
.icon-suit-heart:before {
39+
content: "\2665";
40+
}

0 commit comments

Comments
 (0)