Material Design, Font Awesome Alternative for Blog (valid AMP)
Download and Setup Material Design (Google Icon) in AMP HTML. Alternative Font Awesome and Bootstrap
Download and Setup Material Design (Google Icon) in AMP HTML
Font Awesome is a font and icon toolkit based on CSS and LESS. It was made by Dave Gandy for use with Twitter Bootstrap, and later was incorporated into the BootstrapCDN. Font Awesome has a 20% market share among those websites which use third-party Font Scripts on their platform, ranking it second place after Google Fonts.
Although widely used by web developers, there is a shortage felt by the developers. That is about the speed of website rendering, because of its relatively large size so it is quite slow when accessed. That's why some developers try to find an alternative.
Of the many alternatives toolkit icon available on the internet, Google works --Material Design Icon -- is one of the best alternative at this time. In addition to very quickly accessible, the material icon also does not lose many icons as it provides by Font awesome.
Features:
- Fast render
- Easy to use
- 5 Style of icon: Filled, Outlined, Rounded, Two-Tone, Sharp
- 200+- icons
- Icon used by Google.
- Google Chrome
- Mozilla Firefox
- Opera Browser
- Safari
- IE 9
Developer: Google | Size: 600 bytes.
Official Website: https://material.io
Just copy and paste thio rel code before </head> :
Official Website: https://material.io
How to Setup Materials Design (Google Icon) in AMP HTML and Non-AMPSetup Google Icon on a blog, both AMP HTML and non-AMP blogs are very easy, just like installing awesome fonts.
Just copy and paste thio rel code before </head> :
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'/>
How to render Materials Design Icon on the Web?
Very simple, Material design also uses <i> to call icon on the web.
Go to https://material.io/tools/icons/?style=baseline for various icon options provided by Material Design.
Then click one of the desired icon to be implement on your website.
Copy the code on the left side of the screen and paste it on your web.
example:
<i class="material-icons">backup</i>It's very easy right? Please try to implement on your website.