Lets

1. SARA CANNON HTTP://RAN.GE
Icon Fonts

2. SARA CANNON
Co-founder / Creative Director At Range
sara-cannon.com @saracannon slideshare.net/saracannon

5. IconFonts

6. CSS-TRICKS.COM/EXAMPLES/ICONFONT

7. Genericons
genericons.com
GPL

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

21. Font
Awesome
SIL
fontawesome.io

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

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

32. Sociocons
rohitink.com/sociocons/
GPL

34. FONT GENERATORS

35. Fontastic.me

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

40. Icon Moon
icomoon.io

43. We Love Icon
Fonts.com
free and open source

46. Fontello
fontello.com

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

55. 1 KB5 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

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