When building apps you can use fonts to create icon images in your app. Icons are great to use in an app because they scale in your Views and create smooth edges. This is especially good for small icon images in your app as graphics tend to get artifacts and jagged edges when set to small pixel width and height.
Here is some example code for one commonly used icon, the “Hamburger Menu”.
You’ll notice the CSS in the Class “container” contains code for various mobile browsers. This prevents highlighting, blue link color on tap and other artifacts from interacting with the screen. Your HTML will not be effected by any taps or touch if you use this CSS in your app HTML.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" /> <style> .container{ text-align: center; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } .container { font-size: 34px; color: #C00718; } </style> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/v4-shims.css"> <div class="container"> <i class="fas fa-bars" aria-hidden="true"></i> </div> |
Here is an example of a View in an EachScape app that uses Font awesome for the 2 icons in the Header and 3 icons in the footer of the app. All 5 are using the above code with adjustments to display a specific icon.
LINK: Font Awesome Website
About Author
