Upload
codemotion
View
385
Download
3
Embed Size (px)
Citation preview
Death to Icon Fonts@ninjanailsCodeMotion, May 2016
https://www.flickr.com/photos/minifig/3186925111/
Gill Sans rnm MW dpqb l1IijJ
Verdana rnm MW dpqb l1IijJ
OpenDyslexic rnm MW dpqb l1IijJ
Times rnm MW dpqb l1IijJ
Helvetica rnm MW dpqb l1IijJ
#DZY
People have different needs!
https://www.flickr.com/photos/oskay/265899766/https://www.flickr.com/photos/oskay/265899766/
“… We don’t download fonts; icons are what SVG is for.”
Bruce Lawson, Opera
https://www.flickr.com/photos/zeldman/14064254462/
“This doesn’t just benefit Opera Mini users; many people with mild dyslexia have a special system font to aid legibility, which breaks icon fonts.”
Bruce Lawson, Opera
https://dev.opera.com/articles/making-sites-work-opera-mini/
Opera Mini has 250M+ users
(And then there’s Nokia Xpress, Blackberry 4 & 5, Android 2.1, Windows 7)
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/
1999/xlink" width="200" height="200" aria-labelledby=“title desc" viewBox="0 0 32 32">
<title id="title">Rating star</title>
<desc id="desc">A white star with a black border.</desc>
<path fill="#444" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056
1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16
23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807
1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/
1999/xlink" width="200" height="200" aria-labelledby=“title desc" viewBox="0 0 32 32">
<title id="title">Rating star</title>
<desc id="desc">A white star with a black border.</desc>
<path fill="#444" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056
1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16
23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807
1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"> <polygon fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="10,2.003 11.985,8.112 18.407,8.112 13.212,11.887 15.196,17.996 10,14.221 4.803,17.996 6.789,11.887 1.592, 8.112 8.015,8.112 "/> </svg>
<svg>
<svg> <defs>
<symbol id="icon-home" viewBox="0 0 1024 1024"><title>home</title><path class="path1" d="M1024 590.444l-512-397.426-512
397.428v-162.038l512-397.426 512 397.428zM896 576v384h-256v-256h-256v256h-256v-384l384-288z"></path>
</symbol>
<symbol id="icon-newspaper" viewBox="0 0 1024 1024"><title>newspaper</title><path class="path1" d="M896 256v-128h-896v704c0 35.346 28.654 64 64
64h864c53.022 0 96-42.978 96-96v-544h-128zM832 832h-768v-640h768v640zM128 320h640v64h-640zM512 448h256v64h-256zM512 576h256v64h-256zM512 704h192v64h-192zM128 448h320v320h-320z"></path>
</symbol>
</defs></svg>
Icon System - defining
.star { background: url(star.svg); display: block; width: 83px; height: 83px; background-size: 83px 83px;}
css background
“Icon font perf in Chrome is ~5x SVG atm”Addy Osmani, Google
https://www.flickr.com/photos/see_also/15049247418/