example.html 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719
  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. body {
  12. font-family: sans-serif;
  13. line-height: 1.5;
  14. margin: 0;
  15. color: #2f2d2c;
  16. background: #fff;
  17. font-size: 11pt;
  18. }
  19. a {
  20. color: #2f2d2c;
  21. }
  22. h4 {
  23. margin-top: 40px;
  24. }
  25. #iconlist {
  26. clear: both;
  27. margin-bottom: 20px;
  28. }
  29. #iconlist div {
  30. padding: 10px;
  31. overflow: hidden;
  32. white-space: nowrap;
  33. font-size: 32px;
  34. line-height: 1;
  35. position: relative;
  36. width: 32px;
  37. height: 32px;
  38. }
  39. #iconlist div:before {
  40. margin-right: 20px;
  41. }
  42. #iconlist div:hover {
  43. cursor: pointer;
  44. color: #e4c05c;
  45. }
  46. #primary {
  47. background: #e4c05c;
  48. overflow: hidden;
  49. }
  50. #content {
  51. position: relative;
  52. color: #fff;
  53. max-width: 980px;
  54. padding: 0 10px;
  55. margin: 0 auto;
  56. }
  57. #icons {
  58. background: #fbfbfb;
  59. }
  60. #icons #iconlist {
  61. max-width: 980px;
  62. box-sizing: border-box;
  63. -moz-box-sizing:border-box;
  64. -webkit-box-sizing:border-box;
  65. padding: 20px 0;
  66. margin: 0 auto;
  67. }
  68. #glyph {
  69. float: left;
  70. width: 50%;
  71. box-sizing: border-box;
  72. -moz-box-sizing:border-box;
  73. -webkit-box-sizing:border-box;
  74. -ms-box-sizing:border-box;
  75. padding: 20px 0;
  76. }
  77. #glyph .info {
  78. float: right;
  79. width: 180px;
  80. padding: 36px 0 0 0;
  81. }
  82. #glyph .info a {
  83. color: #2f2d2c;
  84. display: block;
  85. padding: 8px 0 8px 15px;
  86. }
  87. #glyph .info strong {
  88. font-weight: normal;
  89. display: block;
  90. padding: 8px 0;
  91. }
  92. #glyph .genericon {
  93. font-size: 256px;
  94. width: 256px;
  95. height: 256px;
  96. overflow: visible;
  97. float: left;
  98. }
  99. .description {
  100. margin-top: 50px;
  101. width: 48%;
  102. float: right;
  103. padding-left: 40px;
  104. margin-left: 2%;
  105. box-sizing: border-box;
  106. -moz-box-sizing:border-box;
  107. -webkit-box-sizing:border-box;
  108. -ms-box-sizing:border-box;
  109. background-size: 4px 4px;
  110. }
  111. #primary h2 {
  112. color: white;
  113. margin: 0 auto;
  114. padding: 22px 0 0 20px;
  115. max-width: 980px;
  116. font-size: 2em;
  117. }
  118. #primary h2 span {
  119. display: block;
  120. font-weight: normal;
  121. font-size: 12pt;
  122. }
  123. #footer {
  124. clear: both;
  125. max-width: 980px;
  126. margin: 80px auto;
  127. text-align: center;
  128. text-transform: uppercase;
  129. letter-spacing: .1em;
  130. font-size: 7pt;
  131. color: #ddd;
  132. }
  133. #footer a {
  134. color: #ccc;
  135. display: inline-block;
  136. width: 150px;
  137. overflow: hidden;
  138. text-indent: 100%;
  139. position: relative;
  140. top: 2px;
  141. opacity: .3;
  142. background-repeat: no-repeat;
  143. background-position: center top;
  144. background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTUwcHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMTAgMCAxNTAgMTQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMTAgMCAxNTAgMTQiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZmlsbD0iIzQ0NDQ0NCIgZD0iTTY1LjQzOCwxMi41Yy0zLjYyNiwwLTUuOTc2LTIuNjEyLTUuOTc2LTUuMzMxVjYuODMxYzAtMi43NjUsMi4zNTEtNS4zMyw1Ljk3Ni01LjMzDQoJCWMzLjY0MSwwLDUuOTksMi41NjUsNS45OSw1LjMzdjAuMzM5QzcxLjQyOCw5Ljg4OCw2OS4wNzksMTIuNSw2NS40MzgsMTIuNXogTTY5LjQ5Miw2Ljg2MWMwLTEuOTgtMS40NDQtMy43NDgtNC4wNTUtMy43NDgNCgkJcy00LjA0LDEuNzY4LTQuMDQsMy43NDh2MC4yNDZjMCwxLjk4MSwxLjQyOSwzLjc3OSw0LjA0LDMuNzc5czQuMDU1LTEuNzk4LDQuMDU1LTMuNzc5VjYuODYxeiIvPg0KCTxwYXRoIGZpbGw9IiM0NDQ0NDQiIGQ9Ik0yNC40OTgsMTIuMWwtMS4zNTItMi41MzVoLTYuMDA3TDE1LjgzNCwxMi4xaC0yLjAyOGw1LjUzMS0xMC4yM2gxLjU5N2w1LjYyMiwxMC4yM0gyNC40OThMMjQuNDk4LDEyLjF6DQoJCSBNMjAuMDksMy44NjZsLTIuMjI4LDQuMzAxaDQuNTMxTDIwLjA5LDMuODY2eiIvPg0KCTxwYXRoIGZpbGw9IiM0NDQ0NDQiIGQ9Ik0zNS4yODEsMTIuNWMtMy42NzEsMC01LjM3Ni0xLjk5Ni01LjM3Ni00LjY1NFYxLjg3aDEuOTA0djYuMDA2YzAsMS44OTEsMS4yNDUsMy4wMTMsMy42MSwzLjAxMw0KCQljMi40MjgsMCwzLjQyNi0xLjEyMiwzLjQyNi0zLjAxM1YxLjg3aDEuOTJ2NS45NzZDNDAuNzY3LDEwLjM4LDM5LjEzOCwxMi41LDM1LjI4MSwxMi41eiIvPg0KCTxwYXRoIGZpbGw9IiM0NDQ0NDQiIGQ9Ik01MS40NTgsMy40NjdWMTIuMWgtMS45MTlWMy40NjdoLTQuNDcxVjEuODdoMTAuODZ2MS41OThMNTEuNDU4LDMuNDY3TDUxLjQ1OCwzLjQ2N3oiLz4NCgk8cGF0aCBmaWxsPSIjNDQ0NDQ0IiBkPSJNODguNTQzLDEyLjFWNC4wMDRsLTAuNTA5LDAuODkxTDgzLjc0OSwxMi4xaC0wLjkzN2wtNC4yNC03LjIwNWwtMC41MDYtMC44OTFWMTIuMWgtMS44NzVWMS44N2gyLjY1OA0KCQlsNC4wNCw3LjAyMWwwLjQ3NiwwLjg2bDAuNDc3LTAuODZsMy45OTQtNy4wMjFoMi42MjdWMTIuMUg4OC41NDNMODguNTQzLDEyLjF6Ii8+DQoJPHBhdGggZmlsbD0iIzQ0NDQ0NCIgZD0iTTEwNC45NzgsMTIuMWwtMS4zNTItMi41MzVoLTYuMDA4TDk2LjMxMywxMi4xaC0yLjAyOGw1LjUzMS0xMC4yMzFoMS41OTlsNS42MjIsMTAuMjMxSDEwNC45Nzh6DQoJCSBNMTAwLjU3LDMuODY2bC0yLjIyOCw0LjMwMWg0LjUyOUwxMDAuNTcsMy44NjZ6Ii8+DQoJPHBhdGggZmlsbD0iIzQ0NDQ0NCIgZD0iTTExNC43NzgsMy40NjdWMTIuMWgtMS45MlYzLjQ2N2gtNC40N1YxLjg3aDEwLjg2djEuNTk4TDExNC43NzgsMy40NjdMMTE0Ljc3OCwzLjQ2N3oiLz4NCgk8cGF0aCBmaWxsPSIjNDQ0NDQ0IiBkPSJNMTI4Ljg2NiwzLjQ2N1YxMi4xaC0xLjkxOVYzLjQ2N2gtNC40NzJWMS44N2gxMC44NnYxLjU5OEwxMjguODY2LDMuNDY3TDEyOC44NjYsMy40Njd6Ii8+DQoJPHBhdGggZmlsbD0iIzQ0NDQ0NCIgZD0iTTEzOC4wNjcsMTIuMVYyLjgzN2MwLjc2OSwwLDEuMDc2LTAuNDE1LDEuMDc2LTAuOTY4aDAuODE0VjEyLjFIMTM4LjA2N0wxMzguMDY3LDEyLjF6Ii8+DQoJPHBhdGggZmlsbD0iIzQ0NDQ0NCIgZD0iTTE1NC45OTYsNC43NTdjLTAuOTIxLTAuODQ1LTIuMjc0LTEuNjQ0LTQuMTAyLTEuNjQ0Yy0yLjczMywwLTQuMjcsMS44NzUtNC4yNywzLjgyNXYwLjINCgkJYzAsMS45MzcsMS41NTEsMy43NDgsNC40MDgsMy43NDhjMS43MDUsMCwzLjExOC0wLjgxNCw0LjAwOS0xLjY0NGwxLjE1MiwxLjIxNWMtMS4xMjEsMS4xMDctMy4wMjYsMi4wNDMtNS4yODUsMi4wNDMNCgkJYy0zLjg3LDAtNi4yMjMtMi41MjEtNi4yMjMtNS4yODRWNi44NzdjMC0yLjc2NiwyLjU2Ni01LjM3Nyw2LjMxNC01LjM3N2MyLjE2NywwLDQuMTM2LDAuOTA2LDUuMTk0LDIuMDQzTDE1NC45OTYsNC43NTd6Ii8+DQoJPHBhdGggZmlsbD0iIzQ0NDQ0NCIgZD0iTTY2LjcwMiw1LjA2YzAuMzQ3LDAuMjI0LDAuNDQ0LDAuNjg3LDAuMjE5LDEuMDM3TDY1LjE2OSw4LjgxYy0wLjIyNSwwLjM0Ny0wLjY4OCwwLjQ0OC0xLjAzMywwLjIyOWwwLDANCgkJQzYzLjc5LDguODEyLDYzLjY5Miw4LjM1MSw2My45MTcsOGwxLjc1MS0yLjcxM0M2NS44OTMsNC45MzgsNjYuMzU1LDQuODM3LDY2LjcwMiw1LjA2TDY2LjcwMiw1LjA2eiIvPg0KPC9nPg0KPC9zdmc+DQo=');
  145. }
  146. #footer a:hover {
  147. opacity: 1;
  148. }
  149. pre, code {
  150. font: 14px/1.5 monospace;
  151. }
  152. .code {
  153. display: block;
  154. font: 14px/1.5 monospace;
  155. width: 600px;
  156. white-space: pre;
  157. border: 1px solid #ccc;
  158. padding: 10px;
  159. overflow: auto;
  160. min-height: 110px;
  161. }
  162. #iconlist .new, #iconlist .update {
  163. position: relative;
  164. }
  165. #iconlist .new:after, #iconlist .update:after {
  166. color: #e4c05c;
  167. display: block;
  168. content: "NEW";
  169. font: bold 8px/1 sans-serif;
  170. position: absolute;
  171. top: 0px;
  172. text-align: center;
  173. z-index: 10;
  174. width: 100%;
  175. }
  176. #iconlist .update:after {
  177. content: "UPDATE";
  178. left: -1px;
  179. }
  180. body.searching #iconlist span.update:after, body.searching #iconlist span.new:after {
  181. display: none;
  182. }
  183. #search {
  184. border: 0;
  185. border-radius: 2px;
  186. position: absolute;
  187. right: 20px;
  188. font: 11pt sans-serif;
  189. padding: 10px;
  190. top: 20px;
  191. background: rgba(255,255,255,.8);
  192. }
  193. #search:focus {
  194. background: #fff;
  195. outline: none;
  196. }
  197. .genericon-404 {
  198. display: none !important; /* This is an easter egg */
  199. }
  200. .genericon:after {
  201. content: attr(alt);
  202. display: block;
  203. font-size: 9px;
  204. color: #999;
  205. text-align: center;
  206. }
  207. .hideUACs.genericon:after {
  208. content: none;
  209. }
  210. @media only screen and ( max-width: 900px ) {
  211. #glyph {
  212. float: none;
  213. width: 100%;
  214. }
  215. #glyph .info {
  216. width: 30%;
  217. }
  218. #glyph .genericon {
  219. width: 70%;
  220. }
  221. .description {
  222. clear: both;
  223. width: 100%;
  224. background: none;
  225. padding-left: 0;
  226. float: none;
  227. }
  228. }
  229. </style>
  230. <script type="text/javascript">
  231. /**
  232. * Example page JS
  233. */
  234. function copyToClipboard ( text, copyMode ) {
  235. if ( copyMode == "css" ) {
  236. window.prompt( "Copy this, then paste in your CSS :before selector.", text );
  237. } else if ( copyMode == "html" ) {
  238. window.prompt( "Copy this, then paste in your HTML.", text );
  239. } else {
  240. window.prompt( "Copy this, then paste in your Photoshop textfield.", text );
  241. }
  242. }
  243. function pickRandomIcon() {
  244. var divs = jQuery("#iconlist div").get().sort(function(){
  245. return Math.round(Math.random())-0.5;
  246. }).slice(0,1);
  247. attr = jQuery(divs).attr('alt');
  248. cssclass = jQuery(divs).attr('class');
  249. displayGlyph( attr, cssclass );
  250. }
  251. function displayGlyph( attr, cssclass ) {
  252. // set permalink
  253. var permalink = cssclass.split(' genericon-')[1];
  254. window.location.hash = permalink;
  255. // css copy string
  256. csstext = "content: \'\\" + attr + "';";
  257. // html copy string
  258. htmltext = '<span class="' + cssclass + '"></span>';
  259. // glyph copy string
  260. glyphtemp = "&#x" + attr + ";";
  261. jQuery('#temp').html( glyphtemp );
  262. glyphtext = jQuery('#temp').text();
  263. // final output
  264. output = '<div class="' + cssclass + '"></div>'
  265. + '<div class="info">'
  266. + '<strong>&larr; ' + cssclass.split( ' ' )[1] + '</strong>'
  267. + '<a href="javascript:copyToClipboard(csstext, \'css\')">Copy CSS</a>'
  268. + '<a href="javascript:copyToClipboard(htmltext, \'html\')">Copy HTML</a>'
  269. + '<a href="javascript:copyToClipboard(glyphtext)">Copy Glyph</a>'
  270. + '</div>';
  271. jQuery( '#glyph' ).html( output );
  272. }
  273. function sortUnicode ( a, b ) {
  274. var numberA = jQuery(a).attr('alt').replace('f', '');
  275. var numberB = jQuery(b).attr('alt').replace('f', '');
  276. var contentA =parseInt( numberA, 16 );
  277. var contentB =parseInt( numberB, 16 );
  278. return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
  279. }
  280. jQuery(document).ready(function() {
  281. // pick random icon if no permalink, otherwise go to permalink
  282. if ( window.location.hash ) {
  283. permalink = "genericon-" + window.location.hash.split('#')[1];
  284. attr = jQuery( '.' + permalink ).attr( 'alt' );
  285. cssclass = jQuery( '.' + permalink ).attr('class');
  286. displayGlyph( attr, cssclass );
  287. } else {
  288. pickRandomIcon();
  289. }
  290. jQuery( '#iconlist div' ).click(function() {
  291. attr = jQuery( this ).attr( 'alt' );
  292. cssclass = jQuery( this ).attr( 'class' );
  293. displayGlyph( attr, cssclass );
  294. });
  295. var $rows = jQuery('#iconlist div');
  296. jQuery('#search').keyup(function() {
  297. // remove update text when using search
  298. jQuery('body').addClass('searching');
  299. var val = jQuery.trim(jQuery(this).val()).replace(/ +/g, ' ').toLowerCase();
  300. $rows.show().filter(function() {
  301. var text = jQuery(this).text().replace(/\s+/g, ' ').toLowerCase();
  302. return !~text.indexOf(val);
  303. }).hide();
  304. });
  305. jQuery('input#search').focus();
  306. // sort based on number
  307. jQuery('#iconlist div').sort( sortUnicode ).appendTo('#iconlist');
  308. });
  309. function toggleUACs() {
  310. jQuery('.genericon').toggleClass('hideUACs');
  311. }
  312. </script>
  313. </head>
  314. <body>
  315. <div id="main">
  316. <div id="primary">
  317. <div id="content">
  318. <h2>Genericons <span>&mdash; A free, GPL, flexible icon font for blogs!</span></h2>
  319. <input placeholder="Filter..." name="search" id="search" type="text" value="" maxlength="150" />
  320. <div id="glyph">
  321. </div>
  322. <div class="description">
  323. <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>
  324. </div>
  325. </div>
  326. </div>
  327. <div id="icons">
  328. <div id="iconlist">
  329. <!-- note, the text inside the HTML elements is purely for the seach -->
  330. <div alt="f423" class="genericon genericon-404" title="genericon-404">404</div>
  331. <div alt="f508" class="genericon genericon-activity" title="genericon-activity">activity</div>
  332. <div alt="f509" class="genericon genericon-anchor" title="genericon-anchor">anchor</div>
  333. <div alt="f101" class="genericon genericon-aside" title="genericon-aside">aside</div>
  334. <div alt="f416" class="genericon genericon-attachment" title="genericon-attachment">attachment</div>
  335. <div alt="f109" class="genericon genericon-audio" title="genericon-audio">audio</div>
  336. <div alt="f471" class="genericon genericon-bold" title="genericon-bold">bold</div>
  337. <div alt="f444" class="genericon genericon-book" title="genericon-book">book</div>
  338. <div alt="f50a" class="genericon genericon-bug" title="genericon-bug">bug</div>
  339. <div alt="f447" class="genericon genericon-cart" title="genericon-cart">cart</div>
  340. <div alt="f301" class="genericon genericon-category" title="genericon-category">category</div>
  341. <div alt="f108" class="genericon genericon-chat" title="genericon-chat">chat</div>
  342. <div alt="f418" class="genericon genericon-checkmark" title="genericon-checkmark">checkmark</div>
  343. <div alt="f405" class="genericon genericon-close" title="genericon-close">close</div>
  344. <div alt="f406" class="genericon genericon-close-alt" title="genericon-close-alt">close-alt</div>
  345. <div alt="f426" class="genericon genericon-cloud" title="genericon-cloud">cloud</div>
  346. <div alt="f440" class="genericon genericon-cloud-download" title="genericon-cloud-download">cloud-download</div>
  347. <div alt="f441" class="genericon genericon-cloud-upload" title="genericon-cloud-upload">cloud-upload</div>
  348. <div alt="f462" class="genericon genericon-code" title="genericon-code">code</div>
  349. <div alt="f216" class="genericon genericon-codepen" title="genericon-codepen">codepen</div>
  350. <div alt="f445" class="genericon genericon-cog" title="genericon-cog">cog</div>
  351. <div alt="f432" class="genericon genericon-collapse" title="genericon-collapse">collapse</div>
  352. <div alt="f300" class="genericon genericon-comment" title="genericon-comment">comment</div>
  353. <div alt="f305" class="genericon genericon-day" title="genericon-day">day</div>
  354. <div alt="f221" class="genericon genericon-digg" title="genericon-digg">digg</div>
  355. <div alt="f443" class="genericon genericon-document" title="genericon-document">document</div>
  356. <div alt="f428" class="genericon genericon-dot" title="genericon-dot">dot</div>
  357. <div alt="f502" class="genericon genericon-downarrow" title="genericon-downarrow">downarrow</div>
  358. <div alt="f50b" class="genericon genericon-download" title="genericon-download">download</div>
  359. <div alt="f436" class="genericon genericon-draggable" title="genericon-draggable">draggable</div>
  360. <div alt="f201" class="genericon genericon-dribbble" title="genericon-dribbble">dribbble</div>
  361. <div alt="f225" class="genericon genericon-dropbox" title="genericon-dropbox">dropbox</div>
  362. <div alt="f433" class="genericon genericon-dropdown" title="genericon-dropdown">dropdown</div>
  363. <div alt="f434" class="genericon genericon-dropdown-left" title="genericon-dropdown-left">dropdown-left</div>
  364. <div alt="f411" class="genericon genericon-edit" title="genericon-edit">edit</div>
  365. <div alt="f476" class="genericon genericon-ellipsis" title="genericon-ellipsis">ellipsis</div>
  366. <div alt="f431" class="genericon genericon-expand" title="genericon-expand">expand</div>
  367. <div alt="f442" class="genericon genericon-external" title="genericon-external">external</div>
  368. <div alt="f203" class="genericon genericon-facebook" title="genericon-facebook">facebook</div>
  369. <div alt="f204" class="genericon genericon-facebook-alt" title="genericon-facebook-alt">facebook-alt</div>
  370. <div alt="f458" class="genericon genericon-fastforward" title="genericon-fastforward">fastforward</div>
  371. <div alt="f413" class="genericon genericon-feed" title="genericon-feed">feed</div>
  372. <div alt="f468" class="genericon genericon-flag" title="genericon-flag">flag</div>
  373. <div alt="f211" class="genericon genericon-flickr" title="genericon-flickr">flickr</div>
  374. <div alt="f226" class="genericon genericon-foursquare" title="genericon-foursquare">foursquare</div>
  375. <div alt="f474" class="genericon genericon-fullscreen" title="genericon-fullscreen">fullscreen</div>
  376. <div alt="f103" class="genericon genericon-gallery" title="genericon-gallery">gallery</div>
  377. <div alt="f200" class="genericon genericon-github" title="genericon-github">github</div>
  378. <div alt="f206" class="genericon genericon-googleplus" title="genericon-googleplus">googleplus</div>
  379. <div alt="f218" class="genericon genericon-googleplus-alt" title="genericon-googleplus-alt">googleplus-alt</div>
  380. <div alt="f50c" class="genericon genericon-handset" title="genericon-handset">handset</div>
  381. <div alt="f461" class="genericon genericon-heart" title="genericon-heart">heart</div>
  382. <div alt="f457" class="genericon genericon-help" title="genericon-help">help</div>
  383. <div alt="f404" class="genericon genericon-hide" title="genericon-hide">hide</div>
  384. <div alt="f505" class="genericon genericon-hierarchy" title="genericon-hierarchy">hierarchy</div>
  385. <div alt="f409" class="genericon genericon-home" title="genericon-home">home</div>
  386. <div alt="f102" class="genericon genericon-image" title="genericon-image">image</div>
  387. <div alt="f455" class="genericon genericon-info" title="genericon-info">info</div>
  388. <div alt="f215" class="genericon genericon-instagram" title="genericon-instagram">instagram</div>
  389. <div alt="f472" class="genericon genericon-italic" title="genericon-italic">italic</div>
  390. <div alt="f427" class="genericon genericon-key" title="genericon-key">key</div>
  391. <div alt="f503" class="genericon genericon-leftarrow" title="genericon-leftarrow">leftarrow</div>
  392. <div alt="f107" class="genericon genericon-link" title="genericon-link">link</div>
  393. <div alt="f207" class="genericon genericon-linkedin" title="genericon-linkedin">linkedin</div>
  394. <div alt="f208" class="genericon genericon-linkedin-alt" title="genericon-linkedin-alt">linkedin-alt</div>
  395. <div alt="f417" class="genericon genericon-location" title="genericon-location">location</div>
  396. <div alt="f470" class="genericon genericon-lock" title="genericon-lock">lock</div>
  397. <div alt="f410" class="genericon genericon-mail" title="genericon-mail">mail</div>
  398. <div alt="f422" class="genericon genericon-maximize" title="genericon-maximize">maximize</div>
  399. <div alt="f419" class="genericon genericon-menu" title="genericon-menu">menu</div>
  400. <div alt="f50d" class="genericon genericon-microphone" title="genericon-microphone">microphone</div>
  401. <div alt="f421" class="genericon genericon-minimize" title="genericon-minimize">minimize</div>
  402. <div alt="f50e" class="genericon genericon-minus" title="genericon-minus">minus</div>
  403. <div alt="f307" class="genericon genericon-month" title="genericon-month">month</div>
  404. <div alt="f50f" class="genericon genericon-move" title="genericon-move">move</div>
  405. <div alt="f429" class="genericon genericon-next" title="genericon-next">next</div>
  406. <div alt="f456" class="genericon genericon-notice" title="genericon-notice">notice</div>
  407. <div alt="f506" class="genericon genericon-paintbrush" title="genericon-paintbrush">paintbrush</div>
  408. <div alt="f219" class="genericon genericon-path" title="genericon-path">path</div>
  409. <div alt="f448" class="genericon genericon-pause" title="genericon-pause">pause</div>
  410. <div alt="f437" class="genericon genericon-phone" title="genericon-phone">phone</div>
  411. <div alt="f473" class="genericon genericon-picture" title="genericon-picture">picture</div>
  412. <div alt="f308" class="genericon genericon-pinned" title="genericon-pinned">pinned</div>
  413. <div alt="f209" class="genericon genericon-pinterest" title="genericon-pinterest">pinterest</div>
  414. <div alt="f210" class="genericon genericon-pinterest-alt" title="genericon-pinterest-alt">pinterest-alt</div>
  415. <div alt="f452" class="genericon genericon-play" title="genericon-play">play</div>
  416. <div alt="f439" class="genericon genericon-plugin" title="genericon-plugin">plugin</div>
  417. <div alt="f510" class="genericon genericon-plus" title="genericon-plus">plus</div>
  418. <div alt="f224" class="genericon genericon-pocket" title="genericon-pocket">pocket</div>
  419. <div alt="f217" class="genericon genericon-polldaddy" title="genericon-polldaddy">polldaddy</div>
  420. <div alt="f460" class="genericon genericon-portfolio" title="genericon-portfolio">portfolio</div>
  421. <div alt="f430" class="genericon genericon-previous" title="genericon-previous">previous</div>
  422. <div alt="f469" class="genericon genericon-print" title="genericon-print">print</div>
  423. <div alt="f106" class="genericon genericon-quote" title="genericon-quote">quote</div>
  424. <div alt="f511" class="genericon genericon-rating-empty" title="genericon-rating-empty">rating-empty</div>
  425. <div alt="f512" class="genericon genericon-rating-full" title="genericon-rating-full">rating-full</div>
  426. <div alt="f513" class="genericon genericon-rating-half" title="genericon-rating-half">rating-half</div>
  427. <div alt="f222" class="genericon genericon-reddit" title="genericon-reddit">reddit</div>
  428. <div alt="f420" class="genericon genericon-refresh" title="genericon-refresh">refresh</div>
  429. <div alt="f412" class="genericon genericon-reply" title="genericon-reply">reply</div>
  430. <div alt="f466" class="genericon genericon-reply-alt" title="genericon-reply-alt">reply-alt</div>
  431. <div alt="f467" class="genericon genericon-reply-single" title="genericon-reply-single">reply-single</div>
  432. <div alt="f459" class="genericon genericon-rewind" title="genericon-rewind">rewind</div>
  433. <div alt="f501" class="genericon genericon-rightarrow" title="genericon-rightarrow">rightarrow</div>
  434. <div alt="f400" class="genericon genericon-search" title="genericon-search">search</div>
  435. <div alt="f438" class="genericon genericon-send-to-phone" title="genericon-send-to-phone">send-to-phone</div>
  436. <div alt="f454" class="genericon genericon-send-to-tablet" title="genericon-send-to-tablet">send-to-tablet</div>
  437. <div alt="f415" class="genericon genericon-share" title="genericon-share">share</div>
  438. <div alt="f403" class="genericon genericon-show" title="genericon-show">show</div>
  439. <div alt="f514" class="genericon genericon-shuffle" title="genericon-shuffle">shuffle</div>
  440. <div alt="f507" class="genericon genericon-sitemap" title="genericon-sitemap">sitemap</div>
  441. <div alt="f451" class="genericon genericon-skip-ahead" title="genericon-skip-ahead">skip-ahead</div>
  442. <div alt="f450" class="genericon genericon-skip-back" title="genericon-skip-back">skip-back</div>
  443. <div alt="f220" class="genericon genericon-skype" title="genericon-skype">skype</div>
  444. <div alt="f424" class="genericon genericon-spam" title="genericon-spam">spam</div>
  445. <div alt="f515" class="genericon genericon-spotify" title="genericon-spotify">spotify</div>
  446. <div alt="f100" class="genericon genericon-standard" title="genericon-standard">standard</div>
  447. <div alt="f408" class="genericon genericon-star" title="genericon-star">star</div>
  448. <div alt="f105" class="genericon genericon-status" title="genericon-status">status</div>
  449. <div alt="f449" class="genericon genericon-stop" title="genericon-stop">stop</div>
  450. <div alt="f223" class="genericon genericon-stumbleupon" title="genericon-stumbleupon">stumbleupon</div>
  451. <div alt="f463" class="genericon genericon-subscribe" title="genericon-subscribe">subscribe</div>
  452. <div alt="f465" class="genericon genericon-subscribed" title="genericon-subscribed">subscribed</div>
  453. <div alt="f425" class="genericon genericon-summary" title="genericon-summary">summary</div>
  454. <div alt="f453" class="genericon genericon-tablet" title="genericon-tablet">tablet</div>
  455. <div alt="f302" class="genericon genericon-tag" title="genericon-tag">tag</div>
  456. <div alt="f303" class="genericon genericon-time" title="genericon-time">time</div>
  457. <div alt="f435" class="genericon genericon-top" title="genericon-top">top</div>
  458. <div alt="f407" class="genericon genericon-trash" title="genericon-trash">trash</div>
  459. <div alt="f214" class="genericon genericon-tumblr" title="genericon-tumblr">tumblr</div>
  460. <div alt="f516" class="genericon genericon-twitch" title="genericon-twitch">twitch</div>
  461. <div alt="f202" class="genericon genericon-twitter" title="genericon-twitter">twitter</div>
  462. <div alt="f446" class="genericon genericon-unapprove" title="genericon-unapprove">unapprove</div>
  463. <div alt="f464" class="genericon genericon-unsubscribe" title="genericon-unsubscribe">unsubscribe</div>
  464. <div alt="f401" class="genericon genericon-unzoom" title="genericon-unzoom">unzoom</div>
  465. <div alt="f500" class="genericon genericon-uparrow" title="genericon-uparrow">uparrow</div>
  466. <div alt="f304" class="genericon genericon-user" title="genericon-user">user</div>
  467. <div alt="f104" class="genericon genericon-video" title="genericon-video">video</div>
  468. <div alt="f517" class="genericon genericon-videocamera" title="genericon-videocamera">videocamera</div>
  469. <div alt="f212" class="genericon genericon-vimeo" title="genericon-vimeo">vimeo</div>
  470. <div alt="f414" class="genericon genericon-warning" title="genericon-warning">warning</div>
  471. <div alt="f475" class="genericon genericon-website" title="genericon-website">website</div>
  472. <div alt="f306" class="genericon genericon-week" title="genericon-week">week</div>
  473. <div alt="f205" class="genericon genericon-wordpress" title="genericon-wordpress">wordpress</div>
  474. <div alt="f504" class="genericon genericon-xpost" title="genericon-xpost">xpost</div>
  475. <div alt="f213" class="genericon genericon-youtube" title="genericon-youtube">youtube</div>
  476. <div alt="f402" class="genericon genericon-zoom" title="genericon-zoom">zoom</div>
  477. </div>
  478. <div id="temp" style="display: none;"></div>
  479. </div>
  480. <div id="footer">
  481. <p>An <a href="http://automattic.com" rel="nofollow">Automattic</a> Portrayal</p>
  482. <p>No designers were harmed in the making of this icon font.</p>
  483. </div>
  484. </div>
  485. </body>
  486. </html>