Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

IconFonts

7,996 views

Published on

Lets

Published in: Technology, Art & Photos

IconFonts

  1. SARA CANNON HTTP://RAN.GE Icon Fonts
  2. SARA CANNON Co-founder / Creative Director At Range sara-cannon.com @saracannon slideshare.net/saracannon
  3. IconFonts
  4. CSS-TRICKS.COM/EXAMPLES/ICONFONT
  5. Genericons genericons.com GPL
  6. CSS HTML content: 'f400'; <div class="genericon genericon-search"> </div>
  7. function twentythirteen_scripts_styles() { ... // Add Genericons font, used in the main stylesheet. wp_enqueue_style( 'genericons', get_template_directory_uri() . '/fonts/genericons.css', array('genericons'), '2.09' ); ... } add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' ); Functions.php
  8. .tags-links a:first-child:before { content: "f302"; position: relative; top: -1px; } style.css
  9. function twentythirteen_entry_meta() { .... $tag_list = get_the_tag_list( '', __( ', ', 'twentythirteen' ) ); if ( $tag_list ) { echo '<span class="tags-links">' . $tag_list . '</span>'; } ... function.php
  10. @font-face { font-family: 'genericons'; src: url('../fonts/genericons.eot'); } style.css
  11. @font-face { font-family: 'Genericons'; src: url('font/genericons-regular-webfont.eot'); src: url('font/genericons-regular-webfont.eot?#iefix') format('embedded-opentype'), url('font/genericons-regular-webfont.woff') format('woff'), url('font/genericons-regular-webfont.ttf') format('truetype'), url('font/genericons-regular-webfont.svg#genericonsregular') format('svg'); font-weight: normal; font-style: normal; } style.css
  12. <link href="path/to/genericons.css" rel="stylesheet"> header.php
  13. function twentythirteen_scripts_styles() { ... // Add Genericons font, used in the main stylesheet. wp_enqueue_style( 'genericons', get_template_directory_uri() . '/fonts/genericons.css', array(), '2.09' ); ... } add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' ); Functions.php
  14. Font Awesome SIL fontawesome.io
  15. CSS HTML content: 'f400'; <i class="icon-search"></i>
  16. function twentythirteen_scripts_styles() { ... // Add Genericons font, used in the main stylesheet. wp_enqueue_style( 'fontawesome', get_template_directory_uri() . 'path/to/font-awesome/css/font-awesome.min.css', array(), '2.09' ); ... } add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' ); Functions.php
  17. .icon-search:before { content: "f002"; } style.css
  18. wordpress.org/plugins/font-awesome
  19. Raphaël Icon-Set icons.marekventur.de MIT
  20. ELusive Icons shoestrap.org/downloads/elusive-icons- webfont GPL
  21. Sociocons rohitink.com/sociocons/ GPL
  22. FONT GENERATORS
  23. Fontastic.me
  24. WEBDESIGNERDEPOT.COM/2012/01/HOW-TO-MAKE- YOUR-OWN-ICON-WEBFONT/ INKSCAPE.ORG
  25. Icon Moon icomoon.io
  26. We Love Icon Fonts.com free and open source
  27. Fontello fontello.com
  28. Licensing
  29. make.wordpress.org/themes/guidelines/ guidelines-resources
  30. GPL 
  31. SIL  Open Font License
  32. Creative Commons 
  33. SVG Scalable Vector Graphics
  34. 1 KB5 KB
  35. <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="249.994px" height="141.198px" viewBox="125.209 169.552 249.994 141.198" enable-background="new 125.209 169.552 249.994 141.198" xml:space="preserve"> <g> <path fill="#101010" d="M185.807,169.552v28.799l-12.4-0.2l20.6,80.799l22.2-80.799l-12.399,0.2v-28.799h55.599v28.799l-9.6-0.2 l-34.6,112.598h-45.799l-35.399-112.598l-8.8,0.2v-28.799H185.807z"/> <path fill="#FF0013" d="M258.404,310.75v-28.8l12.601,0.2v-84l-12.601,0.2v-28.799h61.601c16.399,0.4,36.999,1,46.199,18 c4.601,8.4,5,16.6,5,19.8c0,2.4,0,7.8-2.601,13.6c-4.201,9.6-11.601,13.4-20.601,17.8c7,2,13,4,18,9.6c3.399,3.6,9.2,12.6,9.2,25.6 c0,11.999-5.2,22.601-15.2,29.397c-11,7.2-24.198,7.2-36.601,7.4H258.404L258.404,310.75z M307.805,226.351 c7.801,0,12.801,0.2,16-0.6c6.801-1.8,10.6-7.2,10.6-13.8c0-1.6,0-5.6-2.799-9.2c-4.4-6.2-10.801-5.4-23.801-5.6V226.351 L307.805,226.351z M307.805,281.95c12.399,0,20.199,0.601,25-2.8c4.6-3.199,4.6-9.4,4.6-10.801c0-4.8-1.6-7.6-2.6-9.199 c-4.199-5.601-10.199-5.799-16.601-5.799h-10.399V281.95z"/> </g> </svg> VBLOGO.SVG
  36. jQuery( function($) { var supportsSVG = false; try { var svg = document.createElementNS("http:// www.w3.org/2000/svg",'svg'); supportsSVG = typeof svg.createSVGPoint == 'function'; } catch(e){} if ( ! supportsSVG ) $( 'body' ).addClass( 'nosvg' ); } ); SVG GRACEFUL DEGRADATION JQUERY
  37. #site-title { background-image: url(../images/logo.svg); } .nosvg #site-title { background-image: url(../images/logo.png); } SVG GRACEFUL DEGRADATION CSS
  38. SVG X2 PNG LOW RES X2 JPG 14KB 13KB 12KB
  39. ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf
  40. Mobile Should Never Be An Afterthought
  41. Mobile First
  42. HiDPI First
  43. Flexibility
  44. Scalability
  45. Speed
  46. Speed AWESOME V.S.
  47. Our work is never over.“ - DAFT PUNK

×