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>