-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
230 lines (202 loc) · 13.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!doctype html>
<html lang="en" class="view-grid">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Snowcone: an icon font set by Tangent Snowball</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="snowcone/vanilla/package/snowcone-vanilla.css" media="screen" />
<link rel="stylesheet" href="homepage-assets/styles.css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="snowcone/vanilla/package/snowcone-vanilla.js"></script>
<![endif]-->
</head>
<body>
<header role="banner" id="header-page">
<hgroup>
<h1 class="snowcone sc-tangentsnowball">Snowcone</h1>
<h2>an icon font set by Tangent Snowball</h2>
</hgroup>
</header>
<section id="abstract">
<h1 class="inv">Intro</h1>
<div id="abstract-inner">
<p>Thanks to folk like Drew Wilson (Pictos), Keyamoon (icoMoon), Dave Gandy (fontawesome) and P.J. Onori (Iconic) the practice of storing icons in a webfont is becoming a regular part of any web designer's arsenal.</p>
<p>At <a href="http://www.tangentsnowball.com" title="Visit our website">Tangent Snowball</a> we realised these good folk all had great icon sets, but we still wanted to make our own firstly, as we love a challenge and secondly, as we wanted a set of icons we could customise per project.</p>
<p>We thought, having done all this work we may as well share, so feel free to use these icons on your projects! Unless you're worried Snowcone is fully accessible, and works in all browsers, down to IE6/7 (with a little help from jQuery).</p>
<p>Our set is in it's infancy right now but we'll be adding new icons. Check our Readme for our current wishlist and feel free to suggest/add more.</p>
<p>What makes webfont icon sets great is that they scale to any size or pixel density (newsflash: new iPad ready!), and can be set to any size or colour without new graphics being generated.</p>
<p>For early adopters, there were accessibility concerns but, thanks to tireless research by folk like Drew Wilson, these concerns have been overcome (he has written a <a href="http://pictos.cc/articles/using-icon-fonts" title="Read Drew's article">great article</a> about it).</p>
</div>
<div id="repo-link">
<a id="fork-btn" href="https://github.com/tangentsnowball/Snowcone" title="Fork the Snowcone repo">Fork it!</a>
<p>Our github homepage also contains all the documentation</p>
</div>
</section>
<section id="icons">
<h1>Vanilla flavour</h1>
<ul class="icons clearfix" id="snowcone-vanilla">
<!-- Tangent Snowball logo -->
<li class="snowcone sc-tangentsnowball"><span>Tangent Snowball</span></li>
<!-- Tangent Snowball logo -->
<!-- Arrows -->
<!-- Set 01 -->
<li class="snowcone sc-outline-up"><span>Outline up</span></li>
<li class="snowcone sc-outline-down"><span>Outline down</span></li>
<li class="snowcone sc-outline-left"><span>Outline left</span></li>
<li class="snowcone sc-outline-right"><span>Outline right</span></li>
<li class="snowcone sc-outline-btmleft"><span>Outline bottom left</span></li>
<li class="snowcone sc-outline-btmright"><span>Outline bottom right</span></li>
<li class="snowcone sc-outline-topleft"><span>Outline top left</span></li>
<li class="snowcone sc-outline-topright"><span>Outline top right</span></li>
<li class="snowcone sc-outline-minimise"><span>Outline minimise</span></li>
<li class="snowcone sc-outline-maximise"><span>Outline maximise</span></li>
<!-- Set 02 -->
<li class="snowcone sc-fill-up"><span>Fill up</span></li>
<li class="snowcone sc-fill-down"><span>Fill down</span></li>
<li class="snowcone sc-fill-left"><span>Fill left</span></li>
<li class="snowcone sc-fill-right"><span>Fill right</span></li>
<li class="snowcone sc-fill-btmleft"><span>Fill bottom left</span></li>
<li class="snowcone sc-fill-btmright"><span>Fill bottom right</span></li>
<li class="snowcone sc-fill-topleft"><span>Fill top left</span></li>
<li class="snowcone sc-fill-topright"><span>Fill top right</span></li>
<li class="snowcone sc-fill-minimise"><span>Fill minimise</span></li>
<li class="snowcone sc-fill-maximise"><span>Fill maximise</span></li>
<li class="snowcone sc-uparrowb"><span>Up arrow</span></li>
<li class="snowcone sc-downarrowb"><span>Down arrow</span></li>
<li class="snowcone sc-leftarrow"><span>Left arrow</span></li>
<li class="snowcone sc-rightarrow"><span>Right arrow</span></li>
<li class="snowcone sc-invarrow-up"><span>Up arrow</span></li>
<li class="snowcone sc-invarrow-down"><span>Down arrow</span></li>
<li class="snowcone sc-invarrow-left"><span>Left arrow</span></li>
<li class="snowcone sc-invarrow-right"><span>Right arrow</span></li>
<li class="snowcone sc-listviewa"><span>List view 01</span></li>
<li class="snowcone sc-listviewb"><span>List view 02</span></li>
<li class="snowcone sc-gridviewa"><span>Grid view 01</span></li>
<li class="snowcone sc-gridviewb"><span>Grid view 02</span></li>
<li class="snowcone sc-menutoggle"><span>Menu toggle</span></li>
<!-- Set 03 -->
<li class="snowcone sc-keyline-up"><span>Keyline up</span></li>
<li class="snowcone sc-keyline-down"><span>Keyline down</span></li>
<li class="snowcone sc-keyline-left"><span>Keyline left</span></li>
<li class="snowcone sc-keyline-right"><span>Keyline right</span></li>
<li class="snowcone sc-hairline-up"><span>Hairline up</span></li>
<li class="snowcone sc-hairline-down"><span>Hairline down</span></li>
<li class="snowcone sc-hairline-left"><span>Hairline left</span></li>
<li class="snowcone sc-hairline-right"><span>Hairline right</span></li>
<!-- Sets -->
<li class="snowcone sc-plus"><span>Plus</span></li>
<li class="snowcone sc-minus"><span>Minus</span></li>
<li class="snowcone sc-smallx"><span>Small 'x'</span></li>
<li class="snowcone sc-cross"><span>Cross</span></li>
<li class="snowcone sc-tick"><span>Tick</span></li>
<li class="snowcone sc-profile"><span>Profile</span></li>
<li class="snowcone sc-profile-blacklist"><span>Blacklisted profile</span></li>
<li class="snowcone sc-hcard"><span>hCard</span></li>
<li class="snowcone sc-search"><span>Search</span></li>
<li class="snowcone sc-zoomin"><span>Zoom in</span></li>
<li class="snowcone sc-zoomout"><span>Zoom out</span></li>
<li class="snowcone sc-email-closed"><span>Email (closed)</span></li>
<li class="snowcone sc-email-open"><span>Email (open)</span></li>
<li class="snowcone sc-email-fill"><span>Email filled</span></li>
<li class="snowcone sc-logout"><span>Logout 01</span></li>
<li class="snowcone sc-logout-mac"><span>Logout 02</span></li>
<li class="snowcone sc-paperclipa"><span>Paperclip 01</span></li>
<li class="snowcone sc-paperclipb"><span>Paperclip 02</span></li>
<li class="snowcone sc-paperclipc"><span>Paperclip 03</span></li>
<li class="snowcone sc-synca"><span>Sync 01</span></li>
<li class="snowcone sc-syncb"><span>Sync 02</span></li>
<li class="snowcone sc-upload"><span>Upload</span></li>
<li class="snowcone sc-download"><span>Download</span></li>
<li class="snowcone sc-flaga"><span>Flag 01</span></li>
<li class="snowcone sc-flagb"><span>Flag 02</span></li>
<li class="snowcone sc-delete-left"><span>Delete left</span></li>
<li class="snowcone sc-delete-right"><span>Delete right</span></li>
<li class="snowcone sc-filter"><span>Filter</span></li>
<li class="snowcone sc-sort"><span>Sort</span></li>
<li class="snowcone sc-arrowup"><span>Arrow Up</span></li>
<li class="snowcone sc-arrowdown"><span>Arrow Down</span></li>
<li class="snowcone sc-minimise"><span>Minimise</span></li>
<li class="snowcone sc-maximise"><span>Maximise</span></li>
<li class="snowcone sc-alert"><span>Alert</span></li>
<li class="snowcone sc-help-circle"><span>Help</span></li>
<li class="snowcone sc-info-circle"><span>Info 01</span></li>
<li class="snowcone sc-info"><span>Info 02</span></li>
<li class="snowcone sc-thumbup"><span>Thumbs up</span></li>
<li class="snowcone sc-thumbdown"><span>Thumbs down</span></li>
<li class="snowcone sc-padlock-open"><span>Padlock open</span></li>
<li class="snowcone sc-padlock-closed"><span>Padlock closed</span></li>
<!-- eCommerce -->
<li class="snowcone sc-delivery"><span>Delivery</span></li>
<li class="snowcone sc-payment"><span>Payment</span></li>
<li class="snowcone sc-shop"><span>Shop</span></li>
<li class="snowcone sc-shop-bag"><span>Shopping bag</span></li>
<li class="snowcone sc-cart"><span>Shopping cart</span></li>
<!-- Social -->
<li class="snowcone sc-fb-fill"><span>Facebook</span></li>
<li class="snowcone sc-gplus-fill"><span>Google+</span></li>
<li class="snowcone sc-rss"><span>RSS</span></li>
<li class="snowcone sc-twitter-fill"><span>Twitter 01</span></li>
<li class="snowcone sc-twitter-nofill"><span>Twitter 02</span></li>
<li class="snowcone sc-4sq-fill"><span>Foursquare</span></li>
<li class="snowcone sc-4sq-ifill"><span>Foursquare inverted</span></li>
<li class="snowcone sc-yt-fill"><span>YouTube</span></li>
<li class="snowcone sc-linkedin-fill"><span>Linkedin fill</span></li>
<li class="snowcone sc-linkedin-nofill"><span>Linkedin nofill</span></li>
<!-- Pants -->
<li class="snowcone sc-pants"><span>Pants *</span></li>
<li class="snowcone sc-pants-granny"><span>Granny pants *</span></li>
<li class="snowcone sc-pants-bikini"><span>Bikini *</span></li>
<li class="snowcone sc-pants-speedo"><span>Speedo **</span></li>
<!-- Other -->
<li class="snowcone sc-addressbook"><span>Address book</span></li>
<li class="snowcone sc-book"><span>Book</span></li>
<li class="snowcone sc-bookmark"><span>Bookmark</span></li>
<li class="snowcone sc-calendar"><span>Calendar</span></li>
<li class="snowcone sc-clock"><span>Clock</span></li>
<li class="snowcone sc-comment"><span>Comment</span></li>
<li class="snowcone sc-doc-default"><span>Document</span></li>
<li class="snowcone sc-dot"><span>Dot</span></li>
<li class="snowcone sc-edit"><span>Edit</span></li>
<li class="snowcone sc-folder"><span>Folder</span></li>
<li class="snowcone sc-heart"><span>Heart</span></li>
<li class="snowcone sc-home"><span>Home</span></li>
<li class="snowcone sc-key"><span>Key</span></li>
<li class="snowcone sc-library"><span>Library</span></li>
<li class="snowcone sc-link"><span>Link</span></li>
<li class="snowcone sc-mapmarker"><span>Map marker</span></li>
<li class="snowcone sc-notes"><span>Notes</span></li>
<li class="snowcone sc-phone"><span>Phone</span></li>
<li class="snowcone sc-print"><span>Print</span></li>
<li class="snowcone sc-refresh"><span>Refresh</span></li>
<li class="snowcone sc-settings"><span>Settings</span></li>
<li class="snowcone sc-slider"><span>Slider</span></li>
<li class="snowcone sc-star"><span>Star</span></li>
<li class="snowcone sc-stop"><span>Stop</span></li>
<li class="snowcone sc-stopwatch"><span>Stopwatch</span></li>
<li class="snowcone sc-suitcase"><span>Suitcase</span></li>
<li class="snowcone sc-tag"><span>Tag</span></li>
<li class="snowcone sc-target"><span>Target</span></li>
<li class="snowcone sc-timer"><span>Timer</span></li>
<li class="snowcone sc-trash"><span>Trash</span></li>
<li class="snowcone sc-view"><span>View</span></li>
<li class="snowcone sc-flame"><span>Flame</span></li>
<li class="snowcone sc-bell"><span>Bell</span></li>
<li class="snowcone sc-image"><span>Image</span></li>
</ul>
</section>
<footer role="contentinfo" id="footer-page">
<p>
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">
<img alt="Creative Commons License" src="http://i.creativecommons.org/l/by-sa/3.0/88x31.png" />
</a>
<br />
<span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Snowcone</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://www.tangentsnowball.com" property="cc:attributionName" rel="cc:attributionURL">Tangent Snowball</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 Unported License</a>. Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/tangentsnowball/Snowcone/" rel="dct:source">github.com</a>
</p>
<small>** Original Speedo icon by <a href="http://www.twitter.com/nathanstaines" title="Visit Natho on Twitter">Natho</a>, of our front-end team. * Pants icons by <a href="http://www.twitter.com/flamingwhopper" title="Visit Jade on Twitter">Jade</a>, one of our designers (she also did most of the others, but the pants ones are spesh).</small>
</footer>
<script src="homepage-assets/scripts.js"></script>
</body>
</html>