Asset fonts let you achieve resolution independence for icons on your site. They are web fonts which contain icons, similar to webdings and can be made specifically for your site.
This presentation was given at Responsive Day Out 2013.
Asset Fonts(in 10 minutes)
View Slide
What areAsset Fonts?
Why ResolutionIndependence?
Photo by miguel77http://flic.kr/p/a7H5jd
@2×@?×
@4×@1× @2×@0.5×@0.25×@8×``````
Like Magic!Photo by eva.pébarhttp://flic.kr/p/9hBrtv
Good for Grandma™
Why Asset Fonts?
✓assets.png assets.ttf
✓✓✓✓ ✓✓
✓
×
How Do ICreate One?
joshe.me/asset-fonts
icomoon.io
How Do IUse It?
.icon:before {content: '\xe012';font-family: 'Cleardings';speak: none;}
.icon:before {content: attr(data-icon);font-family: 'Cleardings';speak: none;}@clearleftCSSHTML
[data-icon]:before {content: attr(data-icon);font-family: 'Cleardings';speak: none;}@clearleftCSSHTML
What AboutLigatureAsset Fonts?
f fiif fll
symbolset.com
forecast.is
-webkit-font-feature-settings: "liga";-moz-font-feature-settings: "liga=1";-moz-font-feature-settings: "liga";-ms-font-feature-settings: "liga" 1;-o-font-feature-settings: "liga";font-feature-settings: "liga";
climaliga.woff19kb
Go forth andcreate resolutionindependence!
Thanks ForListening@joshjegithub.com/joshje/forecastFork It!