The document discusses icon fonts and how to implement them. It provides examples of using icon fonts in CSS and HTML, enqueueing icon font stylesheets in WordPress functions.php, and including icon fonts via <link> tags. Popular open source icon fonts like Genericons, Font Awesome, and Elusive Icons are mentioned along with font generators and licensing options. Scalable Vector Graphics (SVG) are also summarized, including benefits like small file sizes and graceful degradation.

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