Working with Icon Fonts

32b34f5d4fdde3f24996bc8c5ec38f10?s=47 Sara Cannon
September 16, 2013

Working with Icon Fonts

32b34f5d4fdde3f24996bc8c5ec38f10?s=128

Sara Cannon

September 16, 2013
Tweet

Transcript

  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. None
  4. None
  5. IconFonts

  6. CSS-TRICKS.COM/EXAMPLES/ICONFONT

  7. Genericons genericons.com GPL

  8. None
  9. None
  10. None
  11.  CSS HTML content: '\f400'; <div class="genericon genericon-search"> </div>

  12. 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
  13. .tags-links a:first-child:before { content: "\f302"; position: relative; top: -1px; }

    style.css
  14. function twentythirteen_entry_meta() { .... $tag_list = get_the_tag_list( '', __( ',

    ', 'twentythirteen' ) ); if ( $tag_list ) { echo '<span class="tags-links">' . $tag_list . '</span>'; } ... function.php
  15. @font-face { font-family: 'genericons'; src: url('../fonts/genericons.eot'); } style.css

  16. @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
  17. <link href="path/to/genericons.css" rel="stylesheet"> header.php

  18. 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
  19. None
  20. None
  21. Font Awesome SIL fontawesome.io

  22. None
  23. None
  24. CSS HTML content: '\f400'; <i class="icon-search"></i>

  25. 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
  26. .icon-search:before { content: "\f002"; } style.css

  27. wordpress.org/plugins/font-awesome

  28. Raphaël Icon-Set icons.marekventur.de MIT

  29. None
  30. ELusive Icons shoestrap.org/downloads/elusive-icons- webfont GPL

  31. None
  32. Sociocons rohitink.com/sociocons/ GPL

  33. None
  34. FONT GENERATORS

  35. Fontastic.me

  36. None
  37. None
  38. None
  39. WEBDESIGNERDEPOT.COM/2012/01/HOW-TO-MAKE- YOUR-OWN-ICON-WEBFONT/ INKSCAPE.ORG

  40. Icon Moon icomoon.io

  41. None
  42. None
  43. We Love Icon Fonts.com free and open source

  44. None
  45. None
  46. Fontello fontello.com

  47. None
  48. Licensing

  49. make.wordpress.org/themes/guidelines/ guidelines-resources

  50. GPL 

  51. SIL  Open Font License

  52. Creative Commons 

  53. SVG Scalable Vector Graphics

  54. None
  55. 1 KB 5 KB

  56. <?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
  57. 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
  58. #site-title { background-image: url(../images/logo.svg); } .nosvg #site-title { background-image: url(../images/logo.png);

    } SVG GRACEFUL DEGRADATION CSS
  59. None
  60. SVG X2 PNG LOW RES X2 JPG 14KB 13KB 12KB

  61. ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf

  62. Mobile Should Never Be An Afterthought

  63. Mobile First

  64. HiDPI First

  65. Flexibility

  66. Scalability

  67. Speed

  68. Speed AWESOME V.S.

  69. Our work is never over. “ - DAFT PUNK