WebApps with LocalStorage and AppCache/Icons for Menu

Icons can be used in buttons or in [navigation menus] for the menu items with labels or just as graphical images for a button. This learning resource will focus on using icons in AppLSAC.

Mobile View of Hamburger Menu with opened navigation menu
Mobile View of Hamburger Menu with closed navigation menu and visible page "Home"
Hamburger Menu Icon Load Icon e.g. for Buttons
Hamburger Menu Icon from Wiki Commons Load Icon from Wiki Commons

Learning Task

edit
  • First explore the concept of Icon Fonts that bundle a large set of icons in single files to reduce loading time. Furthermore these fonts are in general loaded from Content Delivery Networks (CDN). CDNs make it easy to use fonts like Font Awesome.
  • Learn to store the SVG Images in a Javascript object/hash as string to use them in your AppLSAC.
  • See JSON3D4Aframe for application in buttons and learn about the integration in WebApps in W3C-tutorial about icons[1].

See also

edit

References

edit
  1. Icon Tutorial W3C (2019) https://www.w3schools.com/icons/ - accessed (2919/09/14)