wp-content/themes/twentyfifteen/genericons/example.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>Genericons</title>
   5 <link rel="stylesheet" href="genericons.css">
   6 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
   7 <style type="text/css">
   8 /**
   9  * Example page CSS
  10  */
  11
  12 body {
  13         font-family: sans-serif;
  14         line-height: 1.5;
  15         margin: 0;
  16         color: #2f2d2c;
  17         background: #fff;
  18         font-size: 11pt;
  19 }
  20
  21 a {
  22         color: #2f2d2c;
  23 }
  24
  25 h4 {
  26         margin-top: 40px;
  27 }
  28
  29 #iconlist {
  30         clear: both;
  31         margin-bottom: 20px;
  32 }
  33
  34 #iconlist div {
  35         padding: 10px;
  36         overflow: hidden;
  37         white-space: nowrap;
  38         font-size: 32px;
  39         line-height: 1;
  40         position: relative;
  41         width: 32px;
  42         height: 32px;
  43 }
  44
  45 #iconlist div:before {
  46         margin-right: 20px;
  47 }
  48
  49 #iconlist div:hover {
  50         cursor: pointer;
  51         color: #e4c05c;
  52 }
  53
  54 #primary {
  55         background: #e4c05c;
  56         overflow: hidden;
  57 }
  58
  59 #content {
  60         position: relative;
  61         color: #fff;
  62         max-width: 980px;
  63         padding: 0 10px;
  64         margin: 0 auto;
  65 }
  66
  67 #icons {
  68         background: #fbfbfb;
  69 }
  70
  71 #icons #iconlist {
  72         max-width: 980px;
  73         box-sizing: border-box;
  74         -moz-box-sizing:border-box;
  75         -webkit-box-sizing:border-box;
  76         padding: 20px 0;
  77         margin: 0 auto;
  78 }
  79
  80 #glyph {
  81         float: left;
  82         width: 50%;
  83         box-sizing: border-box;
  84         -moz-box-sizing:border-box;
  85         -webkit-box-sizing:border-box;
  86         -ms-box-sizing:border-box;
  87         padding: 20px 0;
  88 }
  89
  90 #glyph .info {
  91         float: right;
  92         width: 180px;
  93         padding: 36px 0 0 0;
  94 }
  95
  96 #glyph .info a {
  97         color: #2f2d2c;
  98         display: block;
  99         padding: 8px 0 8px 15px;
 100 }
 101
 102 #glyph .info strong {
 103         font-weight: normal;
 104         display: block;
 105         padding: 8px 0;
 106 }
 107
 108 #glyph .genericon {
 109         font-size: 256px;
 110         width: 256px;
 111         height: 256px;
 112         overflow: visible;
 113         float: left;
 114 }
 115
 116 .description {
 117         margin-top: 50px;
 118         width: 48%;
 119         float: right;
 120         padding-left: 40px;
 121         margin-left: 2%;
 122         box-sizing: border-box;
 123         -moz-box-sizing:border-box;
 124         -webkit-box-sizing:border-box;
 125         -ms-box-sizing:border-box;
 126         background-size: 4px 4px;
 127 }
 128
 129 #primary h2 {
 130         color: white;
 131         margin: 0 auto;
 132         padding: 22px 0 0 20px;
 133         max-width: 980px;
 134         font-size: 2em;
 135 }
 136
 137 #primary h2 span {
 138         display: block;
 139         font-weight: normal;
 140         font-size: 12pt;
 141 }
 142
 143 #footer {
 144         clear: both;
 145         max-width: 980px;
 146         margin: 80px auto;
 147         text-align: center;
 148         text-transform: uppercase;
 149         letter-spacing: .1em;
 150         font-size: 7pt;
 151         color: #ddd;
 152 }
 153
 154 #footer a {
 155         color: #ccc;
 156         display: inline-block;
 157         width: 150px;
 158         overflow: hidden;
 159         text-indent: 100%;
 160         position: relative;
 161         top: 2px;
 162         opacity: .3;
 163         background-repeat: no-repeat;
 164         background-position: center top;
 165         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTUwcHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMTAgMCAxNTAgMTQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMTAgMCAxNTAgMTQiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZmlsbD0iIzQ0NDQ0NCIgZD0iTTY1LjQzOCwxMi41Yy0zLjYyNiwwLTUuOTc2LTIuNjEyLTUuOTc2LTUuMzMxVjYuODMxYzAtMi43NjUsMi4zNTEtNS4zMyw1Ljk3Ni01LjMzDQoJCWMzLjY0MSwwLDUuOTksMi41NjUsNS45OSw1LjMzdjAuMzM5QzcxLjQyOCw5Ljg4OCw2OS4wNzksMTIuNSw2NS40MzgsMTIuNXogTTY5LjQ5Miw2Ljg2MWMwLTEuOTgtMS40NDQtMy43NDgtNC4wNTUtMy43NDgNCgkJcy00LjA0LDEuNzY4LTQuMDQsMy43NDh2MC4yNDZjMCwxLjk4MSwxLjQyOSwzLjc3OSw0LjA0LDMuNzc5czQuMDU1LTEuNzk4LDQuMDU1LTMuNzc5VjYuODYxeiIvPg0KCTxwYXRoIGZpbGw9IiM0NDQ0NDQiIGQ9Ik0yNC40OTgsMTIuMWwtMS4zNTItMi41MzVoLTYuMDA3TDE1LjgzNCwxMi4xaC0yLjAyOGw1LjUzMS0xMC4yM2gxLjU5N2w1LjYyMiwxMC4yM0gyNC40OThMMjQuNDk4LDEyLjF6DQoJCSBNMjAuMDksMy44NjZsLTIuMjI4LDQuMzAxaDQuNTMxTDIwLjA5LDMuODY2eiIvPg0KCTxwYXRoIGZpbGw9IiM0NDQ0NDQiIGQ9Ik0zNS4yODEsMTIuNWMtMy42NzEsMC01LjM3Ni0xLjk5Ni01LjM3Ni00LjY1NFYxLjg3aDEuOTA0djYuMDA2YzAsMS44OTEsMS4yNDUsMy4wMTMsMy42MSwzLjAxMw0KCQljMi40MjgsMCwzLjQyNi0xLjEyMiwzLjQyNi0zLjAxM1YxLjg3aDEuOTJ2NS45NzZDNDAuNzY3LDEwLjM4LDM5LjEzOCwxMi41LDM1LjI4MSwxMi41eiIvPg0KCTxwYXRoIGZpbGw9IiM0NDQ0NDQiIGQ9Ik01MS40NTgsMy40NjdWMTIuMWgtMS45MTlWMy40NjdoLTQuNDcxVjEuODdoMTAuODZ2MS41OThMNTEuNDU4LDMuNDY3TDUxLjQ1OCwzLjQ2N3oiLz4NCgk8cGF0aCBmaWxsPSIjNDQ0NDQ0IiBkPSJNODguNTQzLDEyLjFWNC4wMDRsLTAuNTA5LDAuODkxTDgzLjc0OSwxMi4xaC0wLjkzN2wtNC4yNC03LjIwNWwtMC41MDYtMC44OTFWMTIuMWgtMS44NzVWMS44N2gyLjY1OA0KCQlsNC4wNCw3LjAyMWwwLjQ3NiwwLjg2bDAuNDc3LTAuODZsMy45OTQtNy4wMjFoMi42MjdWMTIuMUg4OC41NDNMODguNTQzLDEyLjF6Ii8+DQoJPHBhdGggZmlsbD0iIzQ0NDQ0NCIgZD0iTTEwNC45NzgsMTIuMWwtMS4zNTItMi41MzVoLTYuMDA4TDk2LjMxMywxMi4xaC0yLjAyOGw1LjUzMS0xMC4yMzFoMS41OTlsNS42MjIsMTAuMjMxSDEwNC45Nzh6DQoJCSBNMTAwLjU3LDMuODY2bC0yLjIyOCw0LjMwMWg0LjUyOUwxMDAuNTcsMy44NjZ6Ii8+DQoJPHBhdGggZmlsbD0iIzQ0NDQ0NCIgZD0iTTExNC43NzgsMy40NjdWMTIuMWgtMS45MlYzLjQ2N2gtNC40N1YxLjg3aDEwLjg2djEuNTk4TDExNC43NzgsMy40NjdMMTE0Ljc3OCwzLjQ2N3oiLz4NCgk8cGF0aCBmaWxsPSIjNDQ0NDQ0IiBkPSJNMTI4Ljg2NiwzLjQ2N1YxMi4xaC0xLjkxOVYzLjQ2N2gtNC40NzJWMS44N2gxMC44NnYxLjU5OEwxMjguODY2LDMuNDY3TDEyOC44NjYsMy40Njd6Ii8+DQoJPHBhdGggZmlsbD0iIzQ0NDQ0NCIgZD0iTTEzOC4wNjcsMTIuMVYyLjgzN2MwLjc2OSwwLDEuMDc2LTAuNDE1LDEuMDc2LTAuOTY4aDAuODE0VjEyLjFIMTM4LjA2N0wxMzguMDY3LDEyLjF6Ii8+DQoJPHBhdGggZmlsbD0iIzQ0NDQ0NCIgZD0iTTE1NC45OTYsNC43NTdjLTAuOTIxLTAuODQ1LTIuMjc0LTEuNjQ0LTQuMTAyLTEuNjQ0Yy0yLjczMywwLTQuMjcsMS44NzUtNC4yNywzLjgyNXYwLjINCgkJYzAsMS45MzcsMS41NTEsMy43NDgsNC40MDgsMy43NDhjMS43MDUsMCwzLjExOC0wLjgxNCw0LjAwOS0xLjY0NGwxLjE1MiwxLjIxNWMtMS4xMjEsMS4xMDctMy4wMjYsMi4wNDMtNS4yODUsMi4wNDMNCgkJYy0zLjg3LDAtNi4yMjMtMi41MjEtNi4yMjMtNS4yODRWNi44NzdjMC0yLjc2NiwyLjU2Ni01LjM3Nyw2LjMxNC01LjM3N2MyLjE2NywwLDQuMTM2LDAuOTA2LDUuMTk0LDIuMDQzTDE1NC45OTYsNC43NTd6Ii8+DQoJPHBhdGggZmlsbD0iIzQ0NDQ0NCIgZD0iTTY2LjcwMiw1LjA2YzAuMzQ3LDAuMjI0LDAuNDQ0LDAuNjg3LDAuMjE5LDEuMDM3TDY1LjE2OSw4LjgxYy0wLjIyNSwwLjM0Ny0wLjY4OCwwLjQ0OC0xLjAzMywwLjIyOWwwLDANCgkJQzYzLjc5LDguODEyLDYzLjY5Miw4LjM1MSw2My45MTcsOGwxLjc1MS0yLjcxM0M2NS44OTMsNC45MzgsNjYuMzU1LDQuODM3LDY2LjcwMiw1LjA2TDY2LjcwMiw1LjA2eiIvPg0KPC9nPg0KPC9zdmc+DQo=');
 166 }
 167
 168 #footer a:hover {
 169         opacity: 1;
 170 }
 171
 172 pre, code {
 173         font: 14px/1.5 monospace;
 174 }
 175
 176 .code {
 177         display: block;
 178         font: 14px/1.5 monospace;
 179         width: 600px;
 180         white-space: pre;
 181         border: 1px solid #ccc;
 182         padding: 10px;
 183         overflow: auto;
 184         min-height: 110px;
 185 }
 186
 187 #iconlist .new, #iconlist .update {
 188         position: relative;
 189 }
 190
 191 #iconlist .new:after, #iconlist .update:after {
 192         color: #e4c05c;
 193         display: block;
 194         content: "NEW";
 195         font: bold 8px/1 sans-serif;
 196         position: absolute;
 197         top: 0px;
 198         text-align: center;
 199         z-index: 10;
 200         width: 100%;
 201 }
 202
 203 #iconlist .update:after {
 204         content: "UPDATE";
 205         left: -1px;
 206 }
 207
 208 body.searching #iconlist span.update:after, body.searching #iconlist span.new:after {
 209         display: none;
 210 }
 211
 212 #search {
 213         border: 0;
 214         border-radius: 2px;
 215         position: absolute;
 216         right: 20px;
 217         font: 11pt sans-serif;
 218         padding: 10px;
 219         top: 20px;
 220         background: rgba(255,255,255,.8);
 221 }
 222
 223 #search:focus {
 224         background: #fff;
 225         outline: none;
 226 }
 227
 228 .genericon-404 {
 229         display: none !important; /* This is an easter egg */
 230 }
 231
 232 .genericon:after {
 233         content: attr(alt);
 234         display: block;
 235         font-size: 9px;
 236         color: #999;
 237         text-align: center;
 238 }
 239
 240 .hideUACs.genericon:after {
 241         content: none;
 242 }
 243
 244
 245 @media only screen and ( max-width: 900px ) {
 246
 247         #glyph {
 248                 float: none;
 249                 width: 100%;
 250         }
 251
 252         #glyph .info {
 253                 width: 30%;
 254         }
 255         #glyph .genericon {
 256                 width: 70%;
 257         }
 258
 259         .description {
 260                 clear: both;
 261                 width: 100%;
 262                 background: none;
 263                 padding-left: 0;
 264                 float: none;
 265         }
 266
 267 }
 268 </style>
 269 <script type="text/javascript">
 270 /**
 271  * Example page JS
 272  */
 273
 274 function copyToClipboard ( text, copyMode ) {
 275         if ( copyMode == "css" ) {
 276                 window.prompt( "Copy this, then paste in your CSS :before selector.", text );
 277         } else if ( copyMode == "html" ) {
 278                 window.prompt( "Copy this, then paste in your HTML.", text );
 279         } else {
 280                 window.prompt( "Copy this, then paste in your Photoshop textfield.", text );
 281         }
 282 }
 283
 284 function pickRandomIcon() {
 285         var divs = jQuery("#iconlist div").get().sort(function(){
 286                         return Math.round(Math.random())-0.5;
 287                 }).slice(0,1);
 288
 289         attr = jQuery(divs).attr('alt');
 290         cssclass = jQuery(divs).attr('class');
 291         displayGlyph( attr, cssclass );
 292
 293 }
 294
 295 function displayGlyph( attr, cssclass ) {
 296
 297         // set permalink
 298         var permalink = cssclass.split(' genericon-')[1];
 299         window.location.hash = permalink;
 300
 301         // css copy string
 302         csstext = "content: \'\\" + attr + "';";
 303
 304         // html copy string
 305         htmltext = '<span class="' + cssclass + '"></span>';
 306
 307         // glyph copy string
 308         glyphtemp = "&#x" + attr + ";";
 309         jQuery('#temp').html( glyphtemp );
 310         glyphtext = jQuery('#temp').text();
 311
 312         // final output
 313         output = '<div class="' + cssclass + '"></div>'
 314         + '<div class="info">'
 315                 + '<strong>&larr; ' + cssclass.split( ' ' )[1] + '</strong>'
 316                 + '<a href="javascript:copyToClipboard(csstext, \'css\')">Copy CSS</a>'
 317                 + '<a href="javascript:copyToClipboard(htmltext, \'html\')">Copy HTML</a>'
 318                 + '<a href="javascript:copyToClipboard(glyphtext)">Copy Glyph</a>'
 319         + '</div>';
 320
 321         jQuery( '#glyph' ).html( output );
 322
 323 }
 324
 325 function sortUnicode ( a, b ) {
 326         var numberA = jQuery(a).attr('alt').replace('f', '');
 327         var numberB = jQuery(b).attr('alt').replace('f', '');
 328         var contentA =parseInt( numberA, 16 );
 329         var contentB =parseInt( numberB, 16 );
 330         return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
 331 }
 332
 333 jQuery(document).ready(function() {
 334
 335         // pick random icon if no permalink, otherwise go to permalink
 336         if ( window.location.hash ) {
 337                 permalink = "genericon-" + window.location.hash.split('#')[1];
 338                 attr = jQuery( '.' + permalink ).attr( 'alt' );
 339                 cssclass = jQuery( '.' + permalink ).attr('class');
 340                 displayGlyph( attr, cssclass );
 341         } else {
 342                 pickRandomIcon();
 343         }
 344
 345         jQuery( '#iconlist div' ).click(function() {
 346
 347                 attr = jQuery( this ).attr( 'alt' );
 348                 cssclass = jQuery( this ).attr( 'class' );
 349
 350                 displayGlyph( attr, cssclass );
 351
 352         });
 353
 354         var $rows = jQuery('#iconlist div');
 355         jQuery('#search').keyup(function() {
 356
 357                 // remove update text when using search
 358                 jQuery('body').addClass('searching');
 359
 360             var val = jQuery.trim(jQuery(this).val()).replace(/ +/g, ' ').toLowerCase();
 361
 362             $rows.show().filter(function() {
 363                 var text = jQuery(this).text().replace(/\s+/g, ' ').toLowerCase();
 364                 return !~text.indexOf(val);
 365             }).hide();
 366         });
 367
 368         jQuery('input#search').focus();
 369
 370         // sort based on number
 371         jQuery('#iconlist div').sort( sortUnicode ).appendTo('#iconlist');
 372
 373 });
 374
 375 function toggleUACs() {
 376         jQuery('.genericon').toggleClass('hideUACs');
 377 }
 378 </script>
 379 </head>
 380
 381 <body>
 382
 383 <div id="main">
 384
 385         <div id="primary">
 386                 <div id="content">
 387
 388                         <h2>Genericons <span>&mdash; A free, GPL, flexible icon font for blogs!</span></h2>
 389
 390                         <input placeholder="Filter..." name="search" id="search" type="text" value="" maxlength="150" />
 391
 392                         <div id="glyph">
 393                         </div>
 394
 395                         <div class="description">
 396                                 <p>Genericons are vector icons embedded in a webfont designed to be clean and simple keeping with a generic aesthetic. Use for instant HiDPI or to easily change colors on the fly.</p>
 397                         </div>
 398
 399                 </div>
 400         </div>
 401
 402         <div id="icons">
 403                 <div id="iconlist">
 404
 405                         <!-- note, the text inside the HTML elements is purely for the seach -->
 406
 407                         <div alt="f423" class="genericon genericon-404" title="genericon-404">404</div>
 408
 409                         <div alt="f508" class="genericon genericon-activity" title="genericon-activity">activity</div>
 410
 411                         <div alt="f509" class="genericon genericon-anchor" title="genericon-anchor">anchor</div>
 412
 413                         <div alt="f101" class="genericon genericon-aside" title="genericon-aside">aside</div>
 414
 415                         <div alt="f416" class="genericon genericon-attachment" title="genericon-attachment">attachment</div>
 416
 417                         <div alt="f109" class="genericon genericon-audio" title="genericon-audio">audio</div>
 418
 419                         <div alt="f471" class="genericon genericon-bold" title="genericon-bold">bold</div>
 420
 421                         <div alt="f444" class="genericon genericon-book" title="genericon-book">book</div>
 422
 423                         <div alt="f50a" class="genericon genericon-bug" title="genericon-bug">bug</div>
 424
 425                         <div alt="f447" class="genericon genericon-cart" title="genericon-cart">cart</div>
 426
 427                         <div alt="f301" class="genericon genericon-category" title="genericon-category">category</div>
 428
 429                         <div alt="f108" class="genericon genericon-chat" title="genericon-chat">chat</div>
 430
 431                         <div alt="f418" class="genericon genericon-checkmark" title="genericon-checkmark">checkmark</div>
 432
 433                         <div alt="f405" class="genericon genericon-close" title="genericon-close">close</div>
 434
 435                         <div alt="f406" class="genericon genericon-close-alt" title="genericon-close-alt">close-alt</div>
 436
 437                         <div alt="f426" class="genericon genericon-cloud" title="genericon-cloud">cloud</div>
 438
 439                         <div alt="f440" class="genericon genericon-cloud-download" title="genericon-cloud-download">cloud-download</div>
 440
 441                         <div alt="f441" class="genericon genericon-cloud-upload" title="genericon-cloud-upload">cloud-upload</div>
 442
 443                         <div alt="f462" class="genericon genericon-code" title="genericon-code">code</div>
 444
 445                         <div alt="f216" class="genericon genericon-codepen" title="genericon-codepen">codepen</div>
 446
 447                         <div alt="f445" class="genericon genericon-cog" title="genericon-cog">cog</div>
 448
 449                         <div alt="f432" class="genericon genericon-collapse" title="genericon-collapse">collapse</div>
 450
 451                         <div alt="f300" class="genericon genericon-comment" title="genericon-comment">comment</div>
 452
 453                         <div alt="f305" class="genericon genericon-day" title="genericon-day">day</div>
 454
 455                         <div alt="f221" class="genericon genericon-digg" title="genericon-digg">digg</div>
 456
 457                         <div alt="f443" class="genericon genericon-document" title="genericon-document">document</div>
 458
 459                         <div alt="f428" class="genericon genericon-dot" title="genericon-dot">dot</div>
 460
 461                         <div alt="f502" class="genericon genericon-downarrow" title="genericon-downarrow">downarrow</div>
 462
 463                         <div alt="f50b" class="genericon genericon-download" title="genericon-download">download</div>
 464
 465                         <div alt="f436" class="genericon genericon-draggable" title="genericon-draggable">draggable</div>
 466
 467                         <div alt="f201" class="genericon genericon-dribbble" title="genericon-dribbble">dribbble</div>
 468
 469                         <div alt="f225" class="genericon genericon-dropbox" title="genericon-dropbox">dropbox</div>
 470
 471                         <div alt="f433" class="genericon genericon-dropdown" title="genericon-dropdown">dropdown</div>
 472
 473                         <div alt="f434" class="genericon genericon-dropdown-left" title="genericon-dropdown-left">dropdown-left</div>
 474
 475                         <div alt="f411" class="genericon genericon-edit" title="genericon-edit">edit</div>
 476
 477                         <div alt="f476" class="genericon genericon-ellipsis" title="genericon-ellipsis">ellipsis</div>
 478
 479                         <div alt="f431" class="genericon genericon-expand" title="genericon-expand">expand</div>
 480
 481                         <div alt="f442" class="genericon genericon-external" title="genericon-external">external</div>
 482
 483                         <div alt="f203" class="genericon genericon-facebook" title="genericon-facebook">facebook</div>
 484
 485                         <div alt="f204" class="genericon genericon-facebook-alt" title="genericon-facebook-alt">facebook-alt</div>
 486
 487                         <div alt="f458" class="genericon genericon-fastforward" title="genericon-fastforward">fastforward</div>
 488
 489                         <div alt="f413" class="genericon genericon-feed" title="genericon-feed">feed</div>
 490
 491                         <div alt="f468" class="genericon genericon-flag" title="genericon-flag">flag</div>
 492
 493                         <div alt="f211" class="genericon genericon-flickr" title="genericon-flickr">flickr</div>
 494
 495                         <div alt="f226" class="genericon genericon-foursquare" title="genericon-foursquare">foursquare</div>
 496
 497                         <div alt="f474" class="genericon genericon-fullscreen" title="genericon-fullscreen">fullscreen</div>
 498
 499                         <div alt="f103" class="genericon genericon-gallery" title="genericon-gallery">gallery</div>
 500
 501                         <div alt="f200" class="genericon genericon-github" title="genericon-github">github</div>
 502
 503                         <div alt="f206" class="genericon genericon-googleplus" title="genericon-googleplus">googleplus</div>
 504
 505                         <div alt="f218" class="genericon genericon-googleplus-alt" title="genericon-googleplus-alt">googleplus-alt</div>
 506
 507                         <div alt="f50c" class="genericon genericon-handset" title="genericon-handset">handset</div>
 508
 509                         <div alt="f461" class="genericon genericon-heart" title="genericon-heart">heart</div>
 510
 511                         <div alt="f457" class="genericon genericon-help" title="genericon-help">help</div>
 512
 513                         <div alt="f404" class="genericon genericon-hide" title="genericon-hide">hide</div>
 514
 515                         <div alt="f505" class="genericon genericon-hierarchy" title="genericon-hierarchy">hierarchy</div>
 516
 517                         <div alt="f409" class="genericon genericon-home" title="genericon-home">home</div>
 518
 519                         <div alt="f102" class="genericon genericon-image" title="genericon-image">image</div>
 520
 521                         <div alt="f455" class="genericon genericon-info" title="genericon-info">info</div>
 522
 523                         <div alt="f215" class="genericon genericon-instagram" title="genericon-instagram">instagram</div>
 524
 525                         <div alt="f472" class="genericon genericon-italic" title="genericon-italic">italic</div>
 526
 527                         <div alt="f427" class="genericon genericon-key" title="genericon-key">key</div>
 528
 529                         <div alt="f503" class="genericon genericon-leftarrow" title="genericon-leftarrow">leftarrow</div>
 530
 531                         <div alt="f107" class="genericon genericon-link" title="genericon-link">link</div>
 532
 533                         <div alt="f207" class="genericon genericon-linkedin" title="genericon-linkedin">linkedin</div>
 534
 535                         <div alt="f208" class="genericon genericon-linkedin-alt" title="genericon-linkedin-alt">linkedin-alt</div>
 536
 537                         <div alt="f417" class="genericon genericon-location" title="genericon-location">location</div>
 538
 539                         <div alt="f470" class="genericon genericon-lock" title="genericon-lock">lock</div>
 540
 541                         <div alt="f410" class="genericon genericon-mail" title="genericon-mail">mail</div>
 542
 543                         <div alt="f422" class="genericon genericon-maximize" title="genericon-maximize">maximize</div>
 544
 545                         <div alt="f419" class="genericon genericon-menu" title="genericon-menu">menu</div>
 546
 547                         <div alt="f50d" class="genericon genericon-microphone" title="genericon-microphone">microphone</div>
 548
 549                         <div alt="f421" class="genericon genericon-minimize" title="genericon-minimize">minimize</div>
 550
 551                         <div alt="f50e" class="genericon genericon-minus" title="genericon-minus">minus</div>
 552
 553                         <div alt="f307" class="genericon genericon-month" title="genericon-month">month</div>
 554
 555                         <div alt="f50f" class="genericon genericon-move" title="genericon-move">move</div>
 556
 557                         <div alt="f429" class="genericon genericon-next" title="genericon-next">next</div>
 558
 559                         <div alt="f456" class="genericon genericon-notice" title="genericon-notice">notice</div>
 560
 561                         <div alt="f506" class="genericon genericon-paintbrush" title="genericon-paintbrush">paintbrush</div>
 562
 563                         <div alt="f219" class="genericon genericon-path" title="genericon-path">path</div>
 564
 565                         <div alt="f448" class="genericon genericon-pause" title="genericon-pause">pause</div>
 566
 567                         <div alt="f437" class="genericon genericon-phone" title="genericon-phone">phone</div>
 568
 569                         <div alt="f473" class="genericon genericon-picture" title="genericon-picture">picture</div>
 570
 571                         <div alt="f308" class="genericon genericon-pinned" title="genericon-pinned">pinned</div>
 572
 573                         <div alt="f209" class="genericon genericon-pinterest" title="genericon-pinterest">pinterest</div>
 574
 575                         <div alt="f210" class="genericon genericon-pinterest-alt" title="genericon-pinterest-alt">pinterest-alt</div>
 576
 577                         <div alt="f452" class="genericon genericon-play" title="genericon-play">play</div>
 578
 579                         <div alt="f439" class="genericon genericon-plugin" title="genericon-plugin">plugin</div>
 580
 581                         <div alt="f510" class="genericon genericon-plus" title="genericon-plus">plus</div>
 582
 583                         <div alt="f224" class="genericon genericon-pocket" title="genericon-pocket">pocket</div>
 584
 585                         <div alt="f217" class="genericon genericon-polldaddy" title="genericon-polldaddy">polldaddy</div>
 586
 587                         <div alt="f460" class="genericon genericon-portfolio" title="genericon-portfolio">portfolio</div>
 588
 589                         <div alt="f430" class="genericon genericon-previous" title="genericon-previous">previous</div>
 590
 591                         <div alt="f469" class="genericon genericon-print" title="genericon-print">print</div>
 592
 593                         <div alt="f106" class="genericon genericon-quote" title="genericon-quote">quote</div>
 594
 595                         <div alt="f511" class="genericon genericon-rating-empty" title="genericon-rating-empty">rating-empty</div>
 596
 597                         <div alt="f512" class="genericon genericon-rating-full" title="genericon-rating-full">rating-full</div>
 598
 599                         <div alt="f513" class="genericon genericon-rating-half" title="genericon-rating-half">rating-half</div>
 600
 601                         <div alt="f222" class="genericon genericon-reddit" title="genericon-reddit">reddit</div>
 602
 603                         <div alt="f420" class="genericon genericon-refresh" title="genericon-refresh">refresh</div>
 604
 605                         <div alt="f412" class="genericon genericon-reply" title="genericon-reply">reply</div>
 606
 607                         <div alt="f466" class="genericon genericon-reply-alt" title="genericon-reply-alt">reply-alt</div>
 608
 609                         <div alt="f467" class="genericon genericon-reply-single" title="genericon-reply-single">reply-single</div>
 610
 611                         <div alt="f459" class="genericon genericon-rewind" title="genericon-rewind">rewind</div>
 612
 613                         <div alt="f501" class="genericon genericon-rightarrow" title="genericon-rightarrow">rightarrow</div>
 614
 615                         <div alt="f400" class="genericon genericon-search" title="genericon-search">search</div>
 616
 617                         <div alt="f438" class="genericon genericon-send-to-phone" title="genericon-send-to-phone">send-to-phone</div>
 618
 619                         <div alt="f454" class="genericon genericon-send-to-tablet" title="genericon-send-to-tablet">send-to-tablet</div>
 620
 621                         <div alt="f415" class="genericon genericon-share" title="genericon-share">share</div>
 622
 623                         <div alt="f403" class="genericon genericon-show" title="genericon-show">show</div>
 624
 625                         <div alt="f514" class="genericon genericon-shuffle" title="genericon-shuffle">shuffle</div>
 626
 627                         <div alt="f507" class="genericon genericon-sitemap" title="genericon-sitemap">sitemap</div>
 628
 629                         <div alt="f451" class="genericon genericon-skip-ahead" title="genericon-skip-ahead">skip-ahead</div>
 630
 631                         <div alt="f450" class="genericon genericon-skip-back" title="genericon-skip-back">skip-back</div>
 632
 633                         <div alt="f220" class="genericon genericon-skype" title="genericon-skype">skype</div>
 634
 635                         <div alt="f424" class="genericon genericon-spam" title="genericon-spam">spam</div>
 636
 637                         <div alt="f515" class="genericon genericon-spotify" title="genericon-spotify">spotify</div>
 638
 639                         <div alt="f100" class="genericon genericon-standard" title="genericon-standard">standard</div>
 640
 641                         <div alt="f408" class="genericon genericon-star" title="genericon-star">star</div>
 642
 643                         <div alt="f105" class="genericon genericon-status" title="genericon-status">status</div>
 644
 645                         <div alt="f449" class="genericon genericon-stop" title="genericon-stop">stop</div>
 646
 647                         <div alt="f223" class="genericon genericon-stumbleupon" title="genericon-stumbleupon">stumbleupon</div>
 648
 649                         <div alt="f463" class="genericon genericon-subscribe" title="genericon-subscribe">subscribe</div>
 650
 651                         <div alt="f465" class="genericon genericon-subscribed" title="genericon-subscribed">subscribed</div>
 652
 653                         <div alt="f425" class="genericon genericon-summary" title="genericon-summary">summary</div>
 654
 655                         <div alt="f453" class="genericon genericon-tablet" title="genericon-tablet">tablet</div>
 656
 657                         <div alt="f302" class="genericon genericon-tag" title="genericon-tag">tag</div>
 658
 659                         <div alt="f303" class="genericon genericon-time" title="genericon-time">time</div>
 660
 661                         <div alt="f435" class="genericon genericon-top" title="genericon-top">top</div>
 662
 663                         <div alt="f407" class="genericon genericon-trash" title="genericon-trash">trash</div>
 664
 665                         <div alt="f214" class="genericon genericon-tumblr" title="genericon-tumblr">tumblr</div>
 666
 667                         <div alt="f516" class="genericon genericon-twitch" title="genericon-twitch">twitch</div>
 668
 669                         <div alt="f202" class="genericon genericon-twitter" title="genericon-twitter">twitter</div>
 670
 671                         <div alt="f446" class="genericon genericon-unapprove" title="genericon-unapprove">unapprove</div>
 672
 673                         <div alt="f464" class="genericon genericon-unsubscribe" title="genericon-unsubscribe">unsubscribe</div>
 674
 675                         <div alt="f401" class="genericon genericon-unzoom" title="genericon-unzoom">unzoom</div>
 676
 677                         <div alt="f500" class="genericon genericon-uparrow" title="genericon-uparrow">uparrow</div>
 678
 679                         <div alt="f304" class="genericon genericon-user" title="genericon-user">user</div>
 680
 681                         <div alt="f104" class="genericon genericon-video" title="genericon-video">video</div>
 682
 683                         <div alt="f517" class="genericon genericon-videocamera" title="genericon-videocamera">videocamera</div>
 684
 685                         <div alt="f212" class="genericon genericon-vimeo" title="genericon-vimeo">vimeo</div>
 686
 687                         <div alt="f414" class="genericon genericon-warning" title="genericon-warning">warning</div>
 688
 689                         <div alt="f475" class="genericon genericon-website" title="genericon-website">website</div>
 690
 691                         <div alt="f306" class="genericon genericon-week" title="genericon-week">week</div>
 692
 693                         <div alt="f205" class="genericon genericon-wordpress" title="genericon-wordpress">wordpress</div>
 694
 695                         <div alt="f504" class="genericon genericon-xpost" title="genericon-xpost">xpost</div>
 696
 697                         <div alt="f213" class="genericon genericon-youtube" title="genericon-youtube">youtube</div>
 698
 699                         <div alt="f402" class="genericon genericon-zoom" title="genericon-zoom">zoom</div>
 700
 701
 702                 </div>
 703
 704                 <div id="temp" style="display: none;"></div>
 705
 706         </div>
 707
 708         <div id="footer">
 709
 710                 <p>An <a href="http://automattic.com" rel="nofollow">Automattic</a> Portrayal</p>
 711                 <p>No designers were harmed in the making of this icon font.</p>
 712
 713
 714         </div>
 715
 716 </div>
 717
 718 </body>
 719 </html>