WordPress 4.0
[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                 <div alt="f225" class="genericon genericon-dropbox"></div>
169
170                 <!-- meta icons -->
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>
180
181                 <!-- other icons -->
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>
257
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>
263
264         </div>
265
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>
267
268 <p><textarea class="code" style="min-height: 150px;" onclick="select();">.my-icon:before {
269         content: '\f408';
270         display: inline-block;
271         -webkit-font-smoothing: antialiased;
272         font: normal 32px/1 'Genericons';
273         vertical-align: middle;
274 }</textarea></p>
275
276         <p>Add a matching class to your HTML:</p>
277
278         <p><code>&lt;div class="my-icon"&gt;You're a Star!&lt;/div&gt;</code></p>
279
280         <p>Here's the result: <span class="my-icon">You're a Star!</span></p>
281
282         <h2>Examples</h2>
283
284         <p>Turn every icon a <span style="color: #fa8072;">Salmon</span> color:</p>
285
286 <p><textarea class="code" style="min-height: 70px" onclick="select();">
287 .genericon {
288         color: #fa8072;
289 }</textarea></p>
290
291         <p>Or turn the stars <span style="color: #ffd700;">Gold</span>:</p>
292
293 <p><textarea class="code" style="min-height: 70px" onclick="select();">
294 .genericon-star {
295         color: #fa8072;
296 }</textarea></p>
297
298         <p>Use icons for bulleted lists:</p>
299
300         <ul class="my-checklist">
301                 <li>One</li>
302                 <li>Two</li>
303                 <li>Three</li>
304                 <li>Four</li>
305         </ul>
306
307 <p><textarea class="code" style="min-height: 130px" onclick="select();">
308 <ul class="my-checklist">
309         <li>One</li>
310         <li>Two</li>
311         <li>Three</li>
312         <li>Four</li>
313 </ul></textarea></p>
314
315 <p><textarea class="code" style="min-height: 260px;" onclick="select();">
316 .my-checklist {
317         list-style-type: none;
318         text-indent: -16px;
319 }
320 .my-checklist li:before {
321         padding-right: 16px;
322         content: '\f418';
323         display: inline-block;
324         -webkit-font-smoothing: antialiased;
325         font: normal 16px/1 'Genericons';
326         vertical-align: text-top;
327 }</textarea></p>
328
329         <p>Use icons to style blockquotes:</p>
330
331         <blockquote class="my-blockquote">Sometimes I've believed as many as six impossible things before breakfast. &mdash;<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>
333
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. &mdash;<em>Lewis Carroll</em></blockquote></textarea></p>
335
336 <p><textarea class="code" style="min-height: 300px;" onclick="select();">
337 .my-blockquote {
338         background: #eee;
339         border-left: 32px solid #ddd;
340         padding: 10px;
341 }
342 .my-blockquote:before {
343         margin-left: -42px;
344         padding-right: 10px;
345         content: '\f106';
346         display: inline-block;
347         -webkit-font-smoothing: antialiased;
348         font: normal 32px/20px 'Genericons';
349         vertical-align: bottom;
350 } </textarea></p>
351
352         <p>Use icons to style buttons:</p>
353
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>
356
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>
359
360 <p><textarea class="code" style="min-height: 300px;" onclick="select();">
361 .my-button {
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;
372         color: #fff;
373         text-decoration: none;
374         border: none;
375         border-bottom: 3px solid #b93207;
376         border-radius: 2px;
377 }
378
379 .my-button:hover,
380 .my-button:focus {
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 */
388         outline: none;
389 }
390
391 .my-button:active {
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 */
399         border: none;
400         border-top: 3px solid #b93207;
401         padding: 6px 16px 10px 16px;
402 }</textarea>/</p>
403
404         <h2>CSS Preprocessors</h2>
405
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>
407
408         <p>This example will seup the basic genericon rules and sets a color you can use for all icons using Sass:</p>
409
410 <p><textarea class="code" style="min-height: 360px;" onclick="select();">$icon-color: "#fa8072";
411
412 .genericon {
413         color: $icon-color;
414 }
415
416 @mixin genericon-rules {
417         display: inline-block;
418         -webkit-font-smoothing: antialiased;
419         font: normal 16px/1 'Genericons';
420         vertical-align: middle;
421 }
422
423 .my-icon:before {
424         content: '\f408';
425         @include genericon-rules;
426 }</textarea></p>
427
428         <p>Here is a similar example for LESS:</p>
429
430 <p><textarea class="code" style="min-height: 360px;" onclick="select();">@icon-color: "#fa8072";
431
432 .genericon {
433         color: @icon-color;
434 }
435
436 .genericon-rules {
437         display: inline-block;
438         -webkit-font-smoothing: antialiased;
439         font: normal 16px/1 'Genericons';
440         vertical-align: middle;
441 }
442
443 .my-icon:before {
444         content: '\f408';
445         .genericon-rules;
446 }</textarea></p>
447
448         <h2>Fallback images for IE7 and below</h2>
449
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:
451
452         <p><code>&lt;span class="genericon genericon-warning"&gt;&lt;/span&gt;</code></p>
453
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>
455
456 <textarea class="code" style="min-height: 85px;" onclick="select();">.genericon-warning {
457         *background: url(fallback-icon.png) no-repeat center center;
458         *text-indent: 100%;
459 }</textarea>
460
461 </div>
462
463 </body>
464 </html>