IconFonts

6,546 views

Published on

Lets

Published in: Technology, Art & Photos
5 Comments
14 Likes
Statistics
Notes
No Downloads
Views
Total views
6,546
On SlideShare
0
From Embeds
0
Number of Embeds
87
Actions
Shares
0
Downloads
47
Comments
5
Likes
14
Embeds 0
No embeds

No notes for slide

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

×