✔ Material Design, Alternatif Font Awesome Icon Untuk Blog (Valid Amp)

Download and Setup Material Design (Google Icon) in AMP HTML

Font Awesome yaitu toolkit font dan ikon menurut CSS. Itu dibentuk oleh Dave Gandy untuk dipakai dengan Twitter Bootstrap, dan lalu dimasukkan ke BootstrapCDN.

Font Awesome mempunyai 20% pangsa pasar di antara situs-situs web yang memakai Skrip Font pihak ketiga pada platform mereka, peringkat itu kawasan kedua sesudah Google Fonts. Font Awesome yaitu salah satu font icon paling terkenal yang dipakai oleh para website ketika ini.

Meskipun banyak dipakai oleh para developer web, ada kekurangan yang dirasakan oleh para developer. Yaitu mengenai kecepatan render website, alasannya yaitu ukurannya yang relatif besar sehingga agak lemot ketika diakses. Untuk itulah beberapa developer coba mencari alternatifnya.

Dari sekian banyak alternatif toolkit ikon yang ada di internet, Material Icon karya Google merupakan salah satu alternatif terbaik ketika ini. Selain sangat cepat diakses, material icon juga tidak kalah banyak variasi ikon yang disediakan.

Features:

• Fast render
• Easy to use
• 5 Style of icon: Filled, Outlined, Rounded, Two-Tone, Sharp
• 200+- icons
• Icon used by Google.

Supported Browser:

• Google Chrome
• Mozilla Firefox
• Opera Browser
• Safari
• IE 9

Developer: Google | Size: 600bytes.
Official Website: https://material.io

Cara Memasang Material Design (Google Icon) di Blog AMP dan Non-AMP

Cara memasang Google Icon di blog baik blog AMP HTML dan non-AMP sangat mudah, sama menyerupai memasang font awesome.

Letakan saja instruksi pemanggilan script Material Icon berikut ini sebelum </head> :

<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'/>

Lalu silahkan save template anda.

Bagaimana cara memanggil Material Design Icon di Web?

Hampir sama dengan Font Awesome, Material design juga memakai <i> untuk memanggil icon di web.

Silahkan masuk ke https://material.io/tools/icons/?style=baseline untuk aneka macam pilihan icon.

Lalu klik salah satu icon yang diinginkan untuk dipasang pada web anda.

Copy instruksi yang ada pada sisi kiri layar dan tempelkan pada web anda.
example: <i class="material-icons">backup</i>

Sangat gampang kan? Silahkan coba implementasikan pada website anda.

Sumber http://ampidn.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: