Making of your own Font Awesome 😎

Creation of icon fonts library, like font awesome.
Presented by Rakesh at React Bangalore Meetup

Transcript

1. MAKING OF YOUR FONT AWESOME Icon fonts library Presented by Rakesh
2. Rakesh singh Front-end Engineer MayaData inc @rake7h https://github.com/visualapps/jnoty https://github.com/visualapps/jnoty-inline Creator of
3. @rake7h What are Icon Fonts? Icon fonts are just fonts. However, instead of containing letters or numbers, they contain symbols and glyphs. You can style them with CSS in the same way you style regular text.
4. @rake7h
5. @rake7h Logs Logs
6. @rake7h .fa .fa-user Font awesome, icon selector User icon
7. @rake7h CSS HTML
8. @rake7h Tools & Sites IcoMoon app Fontastic Fontello Webfont app
9. @rake7h Demo
10. @rake7h https://icomoon.io SVG icons Font icons
11. @rake7h
12. @rake7h Why use icon fonts Reduces number of HTTP requests. Icon fonts are standard font which can be easily cached and boost load speed. CSS styling. If you need a few icons without any multicolor modifications and animations then icon fonts are the right choice.
13. @rake7h Accessibility
14. @rake7h Name Style Scale
15. @rake7h Grid
16. @rake7h Iconography
17. @rake7h Normal Grid 32 X 32 icon grid Grid Icon grid
18. @rake7h Keylines Square Circle Vertical rectangle Horizontal rectangle
19. @rake7h Square keyline
20. @rake7h Circle keyline
21. @rake7h Vertical Rectangle keyline
22. @rake7h Horizontal Rectangle keyline
23. @rake7h Layout guide - Touch/Hover target
24. @rake7h Layout guide - Touch/Hover target
25. @rake7h Style guide
26. @rake7h Stroke caps Using a round cap at the end a stroke adds a sense of openness and optimism to the icon. - atlassian.design
27. @rake7h 1px stroke 2px stroke (Default) 3px stroke
28. @rake7h Variations check check-circle check-circle-filled user user-circle-filled user-circle
29. @rake7h Naming convention Add Delete Plus Trash Heart-filled Bulb Idea Solution
30. @rake7h Thank You @rake7h