2 <html dir="ltr" lang="en">
4 <title>Genericons</title>
5 <link rel="stylesheet" href="genericons.css">
6 <style type="text/css">
8 font-family: sans-serif;
22 margin: 0 30px 30px 0;
29 font: 14px/1.5 monospace;
32 border: 1px solid #ccc;
39 display: inline-block;
40 -webkit-font-smoothing: antialiased;
41 font: normal 32px/1 'Genericons';
42 vertical-align: middle;
44 /* For the Examples */
46 list-style-type: none;
49 .my-checklist li:before {
52 display: inline-block;
53 -webkit-font-smoothing: antialiased;
54 font: normal 16px/1 'Genericons';
55 vertical-align: text-top;
59 border-left: 32px solid #ddd;
62 .my-blockquote:before {
66 display: inline-block;
67 -webkit-font-smoothing: antialiased;
68 font: normal 32px/20px 'Genericons';
69 vertical-align: bottom;
72 font-family: Helvetica, sans-serif;
74 background: #e05d22; /* Old browsers */
75 background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome10+,Safari5.1+ */
76 background: -moz-linear-gradient( top, #e05d22 0%, #d94412 100%); /* FF3.6+ */
77 background: -ms-linear-gradient( top, #e05d22 0%, #d94412 100%); /* IE10+ */
78 background: -o-linear-gradient( top, #e05d22 0%, #d94412 100%); /* Opera 11.10+ */
79 background: linear-gradient( to bottom, #e05d22 0%, #d94412 100%); /* W3C */
80 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e05d22', endColorstr='#d94412', GradientType=0); /* IE6-9 */
81 display: inline-block;
82 padding: 10px 16px 4px 16px;
84 text-decoration: none;
86 border-bottom: 3px solid #b93207;
91 background: #ed6a31; /* Old browsers */
92 background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome10+,Safari5.1+ */
93 background: -moz-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* FF3.6+ */
94 background: -ms-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* IE10+ */
95 background: -o-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* Opera 11.10+ */
96 background: linear-gradient( to bottom, #ed6a31 0%, #e55627 100%); /* W3C */
97 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed6a31', endColorstr='#e55627', GradientType=0); /* IE6-9 */
101 background: #d94412; /* Old browsers */
102 background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome10+,Safari5.1+ */
103 background: -moz-linear-gradient( top, #d94412 0%, #e05d22 100%); /* FF3.6+ */
104 background: -ms-linear-gradient( top, #d94412 0%, #e05d22 100%); /* IE10+ */
105 background: -o-linear-gradient( top, #d94412 0%, #e05d22 100%); /* Opera 11.10+ */
106 background: linear-gradient( to bottom, #d94412 0%, #e05d22 100%); /* W3C */
107 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d94412', endColorstr='#e05d22', GradientType=0); /* IE6-9 */
109 border-top: 3px solid #b93207;
110 padding: 6px 16px 7px 16px;
116 <div class="section">
118 <h1>Genericons Usage</h1>
120 <p>Copy the <strong>font</strong> folder and the <strong>genericons.css</strong> file together into your project. Link the CSS in your HTML:</p>
122 <p><code><link href="path/to/genericons.css" rel="stylesheet"></code></p>
124 <p>Drop in the following HTML with the name of the icon you want to display:</p>
126 <p><code><div class="genericon genericon-standard"></div></code></p>
130 <!-- post formats -->
131 <div alt="f100" class="genericon genericon-standard"></div>
132 <div alt="f101" class="genericon genericon-aside"></div>
133 <div alt="f102" class="genericon genericon-image"></div>
134 <div alt="f103" class="genericon genericon-gallery"></div>
135 <div alt="f104" class="genericon genericon-video"></div>
136 <div alt="f105" class="genericon genericon-status"></div>
137 <div alt="f106" class="genericon genericon-quote"></div>
138 <div alt="f107" class="genericon genericon-link"></div>
139 <div alt="f108" class="genericon genericon-chat"></div>
140 <div alt="f109" class="genericon genericon-audio"></div>
142 <!-- social icons -->
143 <div alt="f200" class="genericon genericon-github"></div>
144 <div alt="f201" class="genericon genericon-dribbble"></div>
145 <div alt="f202" class="genericon genericon-twitter"></div>
146 <div alt="f203" class="genericon genericon-facebook"></div>
147 <div alt="f204" class="genericon genericon-facebook-alt"></div>
148 <div alt="f205" class="genericon genericon-wordpress"></div>
149 <div alt="f206" class="genericon genericon-googleplus"></div>
150 <div alt="f207" class="genericon genericon-linkedin"></div>
151 <div alt="f208" class="genericon genericon-linkedin-alt"></div>
152 <div alt="f209" class="genericon genericon-pinterest"></div>
153 <div alt="f210" class="genericon genericon-pinterest-alt"></div>
154 <div alt="f211" class="genericon genericon-flickr"></div>
155 <div alt="f212" class="genericon genericon-vimeo"></div>
156 <div alt="f213" class="genericon genericon-youtube"></div>
157 <div alt="f214" class="genericon genericon-tumblr"></div>
158 <div alt="f215" class="genericon genericon-instagram"></div>
159 <div alt="f216" class="genericon genericon-codepen"></div>
160 <div alt="f217" class="genericon genericon-polldaddy"></div>
161 <div alt="f218" class="genericon genericon-googleplus-alt"></div>
162 <div alt="f219" class="genericon genericon-path"></div>
163 <div alt="f220" class="genericon genericon-skype"></div>
164 <div alt="f221" class="genericon genericon-digg"></div>
165 <div alt="f222" class="genericon genericon-reddit"></div>
166 <div alt="f223" class="genericon genericon-stumbleupon"></div>
167 <div alt="f224" class="genericon genericon-pocket"></div>
168 <div alt="f225" class="genericon genericon-dropbox"></div>
171 <div alt="f300" class="genericon genericon-comment"></div>
172 <div alt="f301" class="genericon genericon-category"></div>
173 <div alt="f302" class="genericon genericon-tag"></div>
174 <div alt="f303" class="genericon genericon-time"></div>
175 <div alt="f304" class="genericon genericon-user"></div>
176 <div alt="f305" class="genericon genericon-day"></div>
177 <div alt="f306" class="genericon genericon-week"></div>
178 <div alt="f307" class="genericon genericon-month"></div>
179 <div alt="f308" class="genericon genericon-pinned"></div>
182 <div alt="f400" class="genericon genericon-search"></div>
183 <div alt="f401" class="genericon genericon-unzoom"></div>
184 <div alt="f402" class="genericon genericon-zoom"></div>
185 <div alt="f403" class="genericon genericon-show"></div>
186 <div alt="f404" class="genericon genericon-hide"></div>
187 <div alt="f405" class="genericon genericon-close"></div>
188 <div alt="f406" class="genericon genericon-close-alt"></div>
189 <div alt="f407" class="genericon genericon-trash"></div>
190 <div alt="f408" class="genericon genericon-star"></div>
191 <div alt="f409" class="genericon genericon-home"></div>
192 <div alt="f410" class="genericon genericon-mail"></div>
193 <div alt="f411" class="genericon genericon-edit"></div>
194 <div alt="f412" class="genericon genericon-reply"></div>
195 <div alt="f413" class="genericon genericon-feed"></div>
196 <div alt="f414" class="genericon genericon-warning"></div>
197 <div alt="f415" class="genericon genericon-share"></div>
198 <div alt="f416" class="genericon genericon-attachment"></div>
199 <div alt="f417" class="genericon genericon-location"></div>
200 <div alt="f418" class="genericon genericon-checkmark"></div>
201 <div alt="f419" class="genericon genericon-menu"></div>
202 <div alt="f420" class="genericon genericon-refresh"></div>
203 <div alt="f421" class="genericon genericon-minimize"></div>
204 <div alt="f422" class="genericon genericon-maximize"></div>
205 <div alt="f423" class="genericon genericon-404"></div>
206 <div alt="f424" class="genericon genericon-spam"></div>
207 <div alt="f425" class="genericon genericon-summary"></div>
208 <div alt="f426" class="genericon genericon-cloud"></div>
209 <div alt="f427" class="genericon genericon-key"></div>
210 <div alt="f428" class="genericon genericon-dot"></div>
211 <div alt="f429" class="genericon genericon-next"></div>
212 <div alt="f430" class="genericon genericon-previous"></div>
213 <div alt="f431" class="genericon genericon-expand"></div>
214 <div alt="f432" class="genericon genericon-collapse"></div>
215 <div alt="f433" class="genericon genericon-dropdown"></div>
216 <div alt="f434" class="genericon genericon-dropdown-left"></div>
217 <div alt="f435" class="genericon genericon-top"></div>
218 <div alt="f436" class="genericon genericon-draggable"></div>
219 <div alt="f437" class="genericon genericon-phone"></div>
220 <div alt="f438" class="genericon genericon-send-to-phone"></div>
221 <div alt="f439" class="genericon genericon-plugin"></div>
222 <div alt="f440" class="genericon genericon-cloud-download"></div>
223 <div alt="f441" class="genericon genericon-cloud-upload"></div>
224 <div alt="f442" class="genericon genericon-external"></div>
225 <div alt="f443" class="genericon genericon-document"></div>
226 <div alt="f444" class="genericon genericon-book"></div>
227 <div alt="f445" class="genericon genericon-cog"></div>
228 <div alt="f446" class="genericon genericon-unapprove"></div>
229 <div alt="f447" class="genericon genericon-cart"></div>
230 <div alt="f448" class="genericon genericon-pause"></div>
231 <div alt="f449" class="genericon genericon-stop"></div>
232 <div alt="f450" class="genericon genericon-skip-back"></div>
233 <div alt="f451" class="genericon genericon-skip-ahead"></div>
234 <div alt="f452" class="genericon genericon-play"></div>
235 <div alt="f453" class="genericon genericon-tablet"></div>
236 <div alt="f454" class="genericon genericon-send-to-tablet"></div>
237 <div alt="f455" class="genericon genericon-info"></div>
238 <div alt="f456" class="genericon genericon-notice"></div>
239 <div alt="f457" class="genericon genericon-help"></div>
240 <div alt="f458" class="genericon genericon-fastforward"></div>
241 <div alt="f459" class="genericon genericon-rewind"></div>
242 <div alt="f460" class="genericon genericon-portfolio"></div>
243 <div alt="f461" class="genericon genericon-heart"></div>
244 <div alt="f462" class="genericon genericon-code"></div>
245 <div alt="f463" class="genericon genericon-subscribe"></div>
246 <div alt="f464" class="genericon genericon-unsubscribe"></div>
247 <div alt="f465" class="genericon genericon-subscribed"></div>
248 <div alt="f466" class="genericon genericon-reply-alt"></div>
249 <div alt="f467" class="genericon genericon-reply-single"></div>
250 <div alt="f468" class="genericon genericon-flag"></div>
251 <div alt="f469" class="genericon genericon-print"></div>
252 <div alt="f470" class="genericon genericon-lock"></div>
253 <div alt="f471" class="genericon genericon-bold"></div>
254 <div alt="f472" class="genericon genericon-italic"></div>
255 <div alt="f473" class="genericon genericon-picture"></div>
256 <div alt="f474" class="genericon genericon-fullscreen"></div>
258 <!-- generic shapes -->
259 <div alt="f500" class="genericon genericon-uparrow"></div>
260 <div alt="f501" class="genericon genericon-rightarrow"></div>
261 <div alt="f502" class="genericon genericon-downarrow"></div>
262 <div alt="f503" class="genericon genericon-leftarrow"></div>
266 <p>If you want to insert an icon manually using the <code>:before</code> selector, you can setup CSS rules like the following example. <strong>Make sure to set the size to a multiple of 16px</strong> or the icons could end up looking fuzzy:</p>
268 <p><textarea class="code" style="min-height: 150px;" onclick="select();">.my-icon:before {
270 display: inline-block;
271 -webkit-font-smoothing: antialiased;
272 font: normal 32px/1 'Genericons';
273 vertical-align: middle;
276 <p>Add a matching class to your HTML:</p>
278 <p><code><div class="my-icon">You're a Star!</div></code></p>
280 <p>Here's the result: <span class="my-icon">You're a Star!</span></p>
284 <p>Turn every icon a <span style="color: #fa8072;">Salmon</span> color:</p>
286 <p><textarea class="code" style="min-height: 70px" onclick="select();">
291 <p>Or turn the stars <span style="color: #ffd700;">Gold</span>:</p>
293 <p><textarea class="code" style="min-height: 70px" onclick="select();">
298 <p>Use icons for bulleted lists:</p>
300 <ul class="my-checklist">
307 <p><textarea class="code" style="min-height: 130px" onclick="select();">
308 <ul class="my-checklist">
315 <p><textarea class="code" style="min-height: 260px;" onclick="select();">
317 list-style-type: none;
320 .my-checklist li:before {
323 display: inline-block;
324 -webkit-font-smoothing: antialiased;
325 font: normal 16px/1 'Genericons';
326 vertical-align: text-top;
329 <p>Use icons to style blockquotes:</p>
331 <blockquote class="my-blockquote">Sometimes I've believed as many as six impossible things before breakfast. —<em>Lewis Carroll</em></blockquote>
332 <blockquote class="my-blockquote">`Twas brillig, and the slithy toves Did gyre and gimble in the wabe: All mimsy were the borogoves, And the mome raths outgrabe. "Beware the Jabberwock, my son! The jaws that bite, the claws that catch! Beware the Jubjub bird, and shun The frumious Bandersnatch!"</blockquote>
334 <p><textarea class="code" style="min-height: 40px;" onclick="select();"><blockquote class="my-blockquote">Sometimes I've believed as many as six impossible things before breakfast. —<em>Lewis Carroll</em></blockquote></textarea></p>
336 <p><textarea class="code" style="min-height: 300px;" onclick="select();">
339 border-left: 32px solid #ddd;
342 .my-blockquote:before {
346 display: inline-block;
347 -webkit-font-smoothing: antialiased;
348 font: normal 32px/20px 'Genericons';
349 vertical-align: bottom;
352 <p>Use icons to style buttons:</p>
354 <a class="my-button" href="javascript:void()"><i class="genericon genericon-show"></i> View</a>
355 <a class="my-button" href="javascript:void()"><i class="genericon genericon-audio"></i> Listen</a>
357 <p><textarea class="code" style="min-height: 40px;" onclick="select();"><a class="my-button" href="#"><i class="genericon genericon-show"></i> View</a>
358 <a class="my-button" href="#"><i class="genericon genericon-audio"></i> Listen</a></textarea></p>
360 <p><textarea class="code" style="min-height: 300px;" onclick="select();">
362 font-family: Helvetica, sans-serif;
363 background: #e05d22; /* Old browsers */
364 background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome10+,Safari5.1+ */
365 background: -moz-linear-gradient( top, #e05d22 0%, #d94412 100%); /* FF3.6+ */
366 background: -ms-linear-gradient( top, #e05d22 0%, #d94412 100%); /* IE10+ */
367 background: -o-linear-gradient( top, #e05d22 0%, #d94412 100%); /* Opera 11.10+ */
368 background: linear-gradient( to bottom, #e05d22 0%, #d94412 100%); /* W3C */
369 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e05d22', endColorstr='#d94412', GradientType=0); /* IE6-9 */
370 display: inline-block;
371 padding: 10px 16px 6px 16px;
373 text-decoration: none;
375 border-bottom: 3px solid #b93207;
381 background: #ed6a31; /* Old browsers */
382 background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome10+,Safari5.1+ */
383 background: -moz-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* FF3.6+ */
384 background: -ms-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* IE10+ */
385 background: -o-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* Opera 11.10+ */
386 background: linear-gradient( to bottom, #ed6a31 0%, #e55627 100%); /* W3C */
387 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed6a31', endColorstr='#e55627', GradientType=0); /* IE6-9 */
392 background: #d94412; /* Old browsers */
393 background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome10+,Safari5.1+ */
394 background: -moz-linear-gradient( top, #d94412 0%, #e05d22 100%); /* FF3.6+ */
395 background: -ms-linear-gradient( top, #d94412 0%, #e05d22 100%); /* IE10+ */
396 background: -o-linear-gradient( top, #d94412 0%, #e05d22 100%); /* Opera 11.10+ */
397 background: linear-gradient( to bottom, #d94412 0%, #e05d22 100%); /* W3C */
398 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d94412', endColorstr='#e05d22', GradientType=0); /* IE6-9 */
400 border-top: 3px solid #b93207;
401 padding: 6px 16px 10px 16px;
404 <h2>CSS Preprocessors</h2>
406 <p>Preprocessing extensions such as Sass (SCSS Syntax) or LESS</a> can make it easier to manage CSS for a lot of things at once using things like variables and mixins.</p>
408 <p>This example will seup the basic genericon rules and sets a color you can use for all icons using Sass:</p>
410 <p><textarea class="code" style="min-height: 360px;" onclick="select();">$icon-color: "#fa8072";
416 @mixin genericon-rules {
417 display: inline-block;
418 -webkit-font-smoothing: antialiased;
419 font: normal 16px/1 'Genericons';
420 vertical-align: middle;
425 @include genericon-rules;
428 <p>Here is a similar example for LESS:</p>
430 <p><textarea class="code" style="min-height: 360px;" onclick="select();">@icon-color: "#fa8072";
437 display: inline-block;
438 -webkit-font-smoothing: antialiased;
439 font: normal 16px/1 'Genericons';
440 vertical-align: middle;
448 <h2>Fallback images for IE7 and below</h2>
450 <p>Genericons <strong>does not come with fallback icons by default</strong> -- therefore you have to create them yourself. If you are using HTML similar to this example:
452 <p><code><span class="genericon genericon-warning"></span></code></p>
454 <p>You can use the asterisk hack to serve a different icon to IE7 once you have saved the fallback icons to your project:</p>
456 <textarea class="code" style="min-height: 85px;" onclick="select();">.genericon-warning {
457 *background: url(fallback-icon.png) no-repeat center center;