FontAwesome - An Introduction to Icon Fonts

Introducing icon fonts (mainly FontAwesome). Motivating the icon fonts not only in web but also desktop development.

Transcript

2. Agenda •Why Icon Fonts? •What are Icon Fonts? •Pros and Cons •Examples
3. Why Icon Fonts? Images are great but they... •...add file weight & slow to load •...don’t scale well •...are difficult to manipulate → Sometimes the best solution for using images in a responsive design is not to use an image.
4. What are Icon Fonts? •Icon fonts are just fonts •Instead of letters they contain symbols http://vanseodesign.com/web-design/icon-fonts/
5. Advantages of Icon Fonts •Scale easily •Change color easily •Include shadows easily ...
6. Advantages of Icon Fonts •Can have transparent knockouts •Have good browser support in general •Can use text based css (still needs better support) ...
7. Advantages of Icon Fonts •Can be designed on the fly (by making changes on :hover, etc.) •Can do everything image icons can do (change opacity, rotate, etc.) •Have smaller file sizes since they contain fewer characters than full typeface
8. Icon Fonts are awesome! https://css-tricks.com/examples/IconFont/
9. Microsoft “Metro” (2012) •Mostly associated with Windows 8 •MS “redesigned” all content & products http://trentwalton.com/2012/10/03/a-new-microsoft-com/
10. Microsoft “Metro” (2012) •Mostly associated with Windows 8 •MS “redesigned” all content & products http://trentwalton.com/2012/10/03/a-new-microsoft-com/
11. Microsoft “Metro” (2012) •Mostly associated with Windows 8 •MS “redesigned” all content & products http://trentwalton.com/2012/10/03/a-new-microsoft-com/
12. Microsoft “Metro” (2012) •Big part of this was an icon font → Segoe UI Symbol http://trentwalton.com/2012/10/03/a-new-microsoft-com/
13. What’s the Downside? •Need to be rendered monochrome • or with css3 gradients •You’re restricted to what’s available • unless you want to create your own •Creating them can be time consuming
14. What’s the Downside? •Need to be rendered monochrome → Use appropriately! These are icons! •You’re restricted to what’s available → What’s available will grow! •Creating them can be time consuming → Just choose from what’s available!
15. Examples •FontAwesome (most popular) •IcoMoon •Many more...
16. FontAwesome •Originally designed for “Bootstrap” (Twitter) •Most popular •pick a random website •odds are it uses http://fontawesome.io (90%)
17. FontAwesome http://fontawesome.io/
18. Summary •Not appropriate for all scenarios •But really awesome when they are, e.g. •scale and maintain proportion •easy to manipulate •Not only for the web •awesome-inc/FontAwesome.Sharp (C#) •cathive/fonts-fontawesome (JavaFx)