| [ Index ] |
WordPress Cross Reference |
[Summary view] [Print] [Text view]
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><link href="path/to/genericons.css" rel="stylesheet"></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><div class="genericon genericon-standard"></div></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><div class="my-icon">You're a Star!</div></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. —<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. —<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><span class="genericon genericon-warning"></span></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>
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated: Tue Mar 25 01:41:18 2014 | WordPress honlapkészítés: online1.hu |