WordPress 3.8
[autoinstalls/wordpress.git] / wp-content / themes / twentyfourteen / genericons / example.html
1 <!DOCTYPE html>
2 <html dir="ltr" lang="en">
3 <head>
4 <title>Genericons</title>
5 <link rel="stylesheet" href="genericons.css">
6 <style type="text/css">
7 body {
8         font-family: sans-serif;
9         line-height: 1.5;
10         width: 800px;
11         margin: 50px auto;
12         color: #777;
13         background: white;
14 }
15 .icons {
16         overflow: hidden;
17         padding: 10px 0;
18 }
19 .icons div {
20         cursor: pointer;
21         float: left;
22         margin: 0 30px 30px 0;
23 }
24 .icons:hover div {
25         background: #f7f7f7;
26 }
27 .code {
28         display: block;
29         font: 14px/1.5 monospace;
30         width: 740px;
31         white-space: pre;
32         border: 1px solid #ccc;
33         padding: 10px;
34         color: #777;
35         overflow: auto;
36 }
37 .my-icon:before {
38         content: '\f408';
39         display: inline-block;
40         -webkit-font-smoothing: antialiased;
41         font: normal 32px/1 'Genericons';
42         vertical-align: middle;
43 }
44 /* For the Examples */
45 .my-checklist {
46         list-style-type: none;
47         text-indent: -16px;
48 }
49 .my-checklist li:before {
50         padding-right: 16px;
51         content: '\f418';
52         display: inline-block;
53         -webkit-font-smoothing: antialiased;
54         font: normal 16px/1 'Genericons';
55         vertical-align: text-top;
56 }
57 .my-blockquote {
58         background: #eee;
59         border-left: 32px solid #ddd;
60         padding: 10px;
61 }
62 .my-blockquote:before {
63         margin-left: -42px;
64         padding-right: 10px;
65         content: '\f106';
66         display: inline-block;
67         -webkit-font-smoothing: antialiased;
68         font: normal 32px/20px 'Genericons';
69         vertical-align: bottom;
70 }
71 .my-button {
72         font-family: Helvetica, sans-serif;
73         font-size: 14px;
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;
83         color: #fff;
84         text-decoration: none;
85         border: none;
86         border-bottom: 3px solid #b93207;
87         border-radius: 2px;
88 }
89 .my-button:hover,
90 .my-button:focus {
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 */
98         outline: none;
99 }
100 .my-button:active {
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 */
108         border: none;
109         border-top: 3px solid #b93207;
110         padding: 6px 16px 7px 16px;
111 }
112 </style>
113 </head>
114 <body>
115
116 <div class="section">
117
118         <h1>Genericons Usage</h1>
119
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>
121
122         <p><code>&lt;link href="path/to/genericons.css" rel="stylesheet"&gt;</code></p>
123
124         <p>Drop in the following HTML with the name of the icon you want to display:</p>
125
126         <p><code>&lt;div class="genericon genericon-standard"&gt;&lt;/div&gt;</code></p>
127
128         <div class="icons">
129         
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>
141
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
169                 <!-- meta icons -->
170                 <div alt="f300" class="genericon genericon-comment"></div>
171                 <div alt="f301" class="genericon genericon-category"></div>
172                 <div alt="f302" class="genericon genericon-tag"></div>
173                 <div alt="f303" class="genericon genericon-time"></div>
174                 <div alt="f304" class="genericon genericon-user"></div>
175                 <div alt="f305" class="genericon genericon-day"></div>
176                 <div alt="f306" class="genericon genericon-week"></div>
177                 <div alt="f307" class="genericon genericon-month"></div>
178                 <div alt="f308" class="genericon genericon-pinned"></div>
179
180                 <!-- other icons -->
181                 <div alt="f400" class="genericon genericon-search"></div>
182                 <div alt="f401" class="genericon genericon-unzoom"></div>
183                 <div alt="f402" class="genericon genericon-zoom"></div>
184                 <div alt="f403" class="genericon genericon-show"></div>
185                 <div alt="f404" class="genericon genericon-hide"></div>
186                 <div alt="f405" class="genericon genericon-close"></div>
187                 <div alt="f406" class="genericon genericon-close-alt"></div>
188                 <div alt="f407" class="genericon genericon-trash"></div>
189                 <div alt="f408" class="genericon genericon-star"></div>
190                 <div alt="f409" class="genericon genericon-home"></div>
191                 <div alt="f410" class="genericon genericon-mail"></div>
192                 <div alt="f411" class="genericon genericon-edit"></div>
193                 <div alt="f412" class="genericon genericon-reply"></div>
194                 <div alt="f413" class="genericon genericon-feed"></div>
195                 <div alt="f414" class="genericon genericon-warning"></div>
196                 <div alt="f415" class="genericon genericon-share"></div>
197                 <div alt="f416" class="genericon genericon-attachment"></div>
198                 <div alt="f417" class="genericon genericon-location"></div>
199                 <div alt="f418" class="genericon genericon-checkmark"></div>
200                 <div alt="f419" class="genericon genericon-menu"></div>
201                 <div alt="f420" class="genericon genericon-refresh"></div>
202                 <div alt="f421" class="genericon genericon-minimize"></div>
203                 <div alt="f422" class="genericon genericon-maximize"></div>
204                 <div alt="f423" class="genericon genericon-404"></div>
205                 <div alt="f424" class="genericon genericon-spam"></div>
206                 <div alt="f425" class="genericon genericon-summary"></div>
207                 <div alt="f426" class="genericon genericon-cloud"></div>
208                 <div alt="f427" class="genericon genericon-key"></div>
209                 <div alt="f428" class="genericon genericon-dot"></div>
210                 <div alt="f429" class="genericon genericon-next"></div>
211                 <div alt="f430" class="genericon genericon-previous"></div>
212                 <div alt="f431" class="genericon genericon-expand"></div>
213                 <div alt="f432" class="genericon genericon-collapse"></div>
214                 <div alt="f433" class="genericon genericon-dropdown"></div>
215                 <div alt="f434" class="genericon genericon-dropdown-left"></div>
216                 <div alt="f435" class="genericon genericon-top"></div>
217                 <div alt="f436" class="genericon genericon-draggable"></div>
218                 <div alt="f437" class="genericon genericon-phone"></div>
219                 <div alt="f438" class="genericon genericon-send-to-phone"></div>
220                 <div alt="f439" class="genericon genericon-plugin"></div>
221                 <div alt="f440" class="genericon genericon-cloud-download"></div>
222                 <div alt="f441" class="genericon genericon-cloud-upload"></div>
223                 <div alt="f442" class="genericon genericon-external"></div>
224                 <div alt="f443" class="genericon genericon-document"></div>
225                 <div alt="f444" class="genericon genericon-book"></div>
226                 <div alt="f445" class="genericon genericon-cog"></div>
227                 <div alt="f446" class="genericon genericon-unapprove"></div>
228                 <div alt="f447" class="genericon genericon-cart"></div>
229                 <div alt="f448" class="genericon genericon-pause"></div>
230                 <div alt="f449" class="genericon genericon-stop"></div>
231                 <div alt="f450" class="genericon genericon-skip-back"></div>
232                 <div alt="f451" class="genericon genericon-skip-ahead"></div>
233                 <div alt="f452" class="genericon genericon-play"></div>
234                 <div alt="f453" class="genericon genericon-tablet"></div>
235                 <div alt="f454" class="genericon genericon-send-to-tablet"></div>
236                 <div alt="f455" class="genericon genericon-info"></div>
237                 <div alt="f456" class="genericon genericon-notice"></div>
238                 <div alt="f457" class="genericon genericon-help"></div>
239                 <div alt="f458" class="genericon genericon-fastforward"></div>
240                 <div alt="f459" class="genericon genericon-rewind"></div>
241                 <div alt="f460" class="genericon genericon-portfolio"></div>
242                 <div alt="f461" class="genericon genericon-heart"></div>
243                 <div alt="f462" class="genericon genericon-code"></div>
244                 <div alt="f463" class="genericon genericon-subscribe"></div>
245                 <div alt="f464" class="genericon genericon-unsubscribe"></div>
246                 <div alt="f465" class="genericon genericon-subscribed"></div>
247                 <div alt="f466" class="genericon genericon-reply-alt"></div>
248                 <div alt="f467" class="genericon genericon-reply-single"></div>
249                 <div alt="f468" class="genericon genericon-flag"></div>
250                 <div alt="f469" class="genericon genericon-print"></div>
251                 <div alt="f470" class="genericon genericon-lock"></div>
252                 <div alt="f471" class="genericon genericon-bold"></div>
253                 <div alt="f472" class="genericon genericon-italic"></div>
254                 <div alt="f473" class="genericon genericon-picture"></div>
255
256                 <!-- generic shapes -->
257                 <div alt="f500" class="genericon genericon-uparrow"></div>
258                 <div alt="f501" class="genericon genericon-rightarrow"></div>
259                 <div alt="f502" class="genericon genericon-downarrow"></div>
260                 <div alt="f503" class="genericon genericon-leftarrow"></div>
261
262         </div>
263
264         <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>
265
266 <p><textarea class="code" style="min-height: 150px;" onclick="select();">.my-icon:before {
267         content: '\f408';
268         display: inline-block;
269         -webkit-font-smoothing: antialiased;
270         font: normal 32px/1 'Genericons';
271         vertical-align: middle;
272 }</textarea></p>
273
274         <p>Add a matching class to your HTML:</p>
275
276         <p><code>&lt;div class="my-icon"&gt;You're a Star!&lt;/div&gt;</code></p>
277
278         <p>Here's the result: <span class="my-icon">You're a Star!</span></p>
279
280         <h2>Examples</h2>
281
282         <p>Turn every icon a <span style="color: #fa8072;">Salmon</span> color:</p>
283
284 <p><textarea class="code" style="min-height: 70px" onclick="select();">
285 .genericon {
286         color: #fa8072;
287 }</textarea></p>
288
289         <p>Or turn the stars <span style="color: #ffd700;">Gold</span>:</p>
290
291 <p><textarea class="code" style="min-height: 70px" onclick="select();">
292 .genericon-star {
293         color: #fa8072;
294 }</textarea></p>
295
296         <p>Use icons for bulleted lists:</p>
297
298         <ul class="my-checklist">
299                 <li>One</li>
300                 <li>Two</li>
301                 <li>Three</li>
302                 <li>Four</li>
303         </ul>
304
305 <p><textarea class="code" style="min-height: 130px" onclick="select();">
306 <ul class="my-checklist">
307         <li>One</li>
308         <li>Two</li>
309         <li>Three</li>
310         <li>Four</li>
311 </ul></textarea></p>
312
313 <p><textarea class="code" style="min-height: 260px;" onclick="select();">
314 .my-checklist {
315         list-style-type: none;
316         text-indent: -16px;
317 }
318 .my-checklist li:before {
319         padding-right: 16px;
320         content: '\f418';
321         display: inline-block;
322         -webkit-font-smoothing: antialiased;
323         font: normal 16px/1 'Genericons';
324         vertical-align: text-top;
325 }</textarea></p>
326
327         <p>Use icons to style blockquotes:</p>
328
329         <blockquote class="my-blockquote">Sometimes I've believed as many as six impossible things before breakfast. &mdash;<em>Lewis Carroll</em></blockquote>
330         <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>
331
332 <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. &mdash;<em>Lewis Carroll</em></blockquote></textarea></p>
333
334 <p><textarea class="code" style="min-height: 300px;" onclick="select();">
335 .my-blockquote {
336         background: #eee;
337         border-left: 32px solid #ddd;
338         padding: 10px;
339 }
340 .my-blockquote:before {
341         margin-left: -42px;
342         padding-right: 10px;
343         content: '\f106';
344         display: inline-block;
345         -webkit-font-smoothing: antialiased;
346         font: normal 32px/20px 'Genericons';
347         vertical-align: bottom;
348 } </textarea></p>
349
350         <p>Use icons to style buttons:</p>
351
352         <a class="my-button" href="javascript:void()"><i class="genericon genericon-show"></i> View</a>
353         <a class="my-button" href="javascript:void()"><i class="genericon genericon-audio"></i> Listen</a>
354
355 <p><textarea class="code" style="min-height: 40px;" onclick="select();"><a class="my-button" href="#"><i class="genericon genericon-show"></i> View</a>
356 <a class="my-button" href="#"><i class="genericon genericon-audio"></i> Listen</a></textarea></p>
357
358 <p><textarea class="code" style="min-height: 300px;" onclick="select();">
359 .my-button {
360         font-family: Helvetica, sans-serif;
361         background: #e05d22; /* Old browsers */
362         background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome10+,Safari5.1+ */
363         background: -moz-linear-gradient(   top, #e05d22 0%, #d94412 100%); /* FF3.6+ */
364         background: -ms-linear-gradient(    top, #e05d22 0%, #d94412 100%); /* IE10+ */
365         background: -o-linear-gradient(     top, #e05d22 0%, #d94412 100%); /* Opera 11.10+ */
366         background: linear-gradient(  to bottom, #e05d22 0%, #d94412 100%); /* W3C */
367         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e05d22', endColorstr='#d94412', GradientType=0); /* IE6-9 */
368         display: inline-block;
369         padding: 10px 16px 6px 16px;
370         color: #fff;
371         text-decoration: none;
372         border: none;
373         border-bottom: 3px solid #b93207;
374         border-radius: 2px;
375 }
376
377 .my-button:hover,
378 .my-button:focus {
379         background: #ed6a31; /* Old browsers */
380         background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome10+,Safari5.1+ */
381         background: -moz-linear-gradient(   top, #ed6a31 0%, #e55627 100%); /* FF3.6+ */
382         background: -ms-linear-gradient(    top, #ed6a31 0%, #e55627 100%); /* IE10+ */
383         background: -o-linear-gradient(     top, #ed6a31 0%, #e55627 100%); /* Opera 11.10+ */
384         background: linear-gradient(  to bottom, #ed6a31 0%, #e55627 100%); /* W3C */
385         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed6a31', endColorstr='#e55627', GradientType=0); /* IE6-9 */
386         outline: none;
387 }
388
389 .my-button:active {
390         background: #d94412; /* Old browsers */
391         background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome10+,Safari5.1+ */
392         background: -moz-linear-gradient(   top, #d94412 0%, #e05d22 100%); /* FF3.6+ */
393         background: -ms-linear-gradient(    top, #d94412 0%, #e05d22 100%); /* IE10+ */
394         background: -o-linear-gradient(     top, #d94412 0%, #e05d22 100%); /* Opera 11.10+ */
395         background: linear-gradient(  to bottom, #d94412 0%, #e05d22 100%); /* W3C */
396         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d94412', endColorstr='#e05d22', GradientType=0); /* IE6-9 */
397         border: none;
398         border-top: 3px solid #b93207;
399         padding: 6px 16px 10px 16px;
400 }</textarea>/</p>
401
402         <h2>CSS Preprocessors</h2>
403
404         <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>
405
406         <p>This example will seup the basic genericon rules and sets a color you can use for all icons using Sass:</p>
407
408 <p><textarea class="code" style="min-height: 360px;" onclick="select();">$icon-color: "#fa8072";
409
410 .genericon {
411         color: $icon-color;
412 }
413
414 @mixin genericon-rules {
415         display: inline-block;
416         -webkit-font-smoothing: antialiased;
417         font: normal 16px/1 'Genericons';
418         vertical-align: middle;
419 }
420
421 .my-icon:before {
422         content: '\f408';
423         @include genericon-rules;
424 }</textarea></p>
425
426         <p>Here is a similar example for LESS:</p>
427
428 <p><textarea class="code" style="min-height: 360px;" onclick="select();">@icon-color: "#fa8072";
429
430 .genericon {
431         color: @icon-color;
432 }
433
434 .genericon-rules {
435         display: inline-block;
436         -webkit-font-smoothing: antialiased;
437         font: normal 16px/1 'Genericons';
438         vertical-align: middle;
439 }
440
441 .my-icon:before {
442         content: '\f408';
443         .genericon-rules;
444 }</textarea></p>
445
446         <h2>Fallback images for IE7 and below</h2>
447
448         <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:
449
450         <p><code>&lt;span class="genericon genericon-warning"&gt;&lt;/span&gt;</code></p>
451
452         <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>
453
454 <textarea class="code" style="min-height: 85px;" onclick="select();">.genericon-warning {
455         *background: url(fallback-icon.png) no-repeat center center;
456         *text-indent: 100%;
457 }</textarea>
458
459 </div>
460
461 </body>
462 </html>