Sunday, June 24, 2018

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

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


Font Awesome adalah toolkit font dan ikon berdasarkan CSS. Itu dibuat oleh Dave Gandy untuk digunakan dengan Twitter Bootstrap, dan kemudian dimasukkan ke BootstrapCDN.

Font Awesome memiliki 20% pangsa pasar di antara situs-situs web yang menggunakan Skrip Font pihak ketiga pada platform mereka, peringkat itu tempat kedua setelah Google Fonts. Font Awesome adalah salah satu font icon paling populer yang digunakan oleh para website saat ini.

Meskipun banyak digunakan oleh para developer web, ada kekurangan yang dirasakan oleh para developer. Yaitu mengenai kecepatan render website, karena ukurannya yang relatif besar sehingga agak lemot saat 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 saat 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 seperti memasang font awesome.

Letakan saja kode 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 menggunakan <i> untuk memanggil icon di web.

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

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


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

Sangat mudah kan? Silahkan coba implementasikan pada website anda.
Disqus Comments