MASIGNALPHA101
6536304137350128937

Tutorial Memasang Material Design Icons Style UI by Google, Alternatif Font Awesome Icon Untuk Blog

Tutorial Memasang Material Design Icons Style UI by Google, Alternatif Font Awesome Icon Untuk Blog
10/27/2018

Baca Juga

Tutorial Memasang Material Design Icons Style UI by Google, Alternatif Font Awesome Icon Untuk Blog
Font Awesome yaitu sebuah toolkit font dan ikon berdasarkan CSS yang dibuat oleh Dave Gandy untuk digunakan dengan Twitter Bootstrap, dan kemudian dimasukkan ke BootstrapCDN.

Font Awesome ini 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 developer website saat ini.

Meskipun para developer websudah banyak yang menggunakannya, masih ada juga kendala atau kekurangan yang dirasakan oleh para developer. Yaitu mengenai kecepatan render website, karena ukurannya yang terlalu besar sehingga agak lemot loading lama saat diakses. Untuk itulah beberapa developer coba mencari alternatifnya. 

Dari sekian banyaknya alternatif toolkit ikon yang ada di internet, ternyata Material Design Icons karya Google lah yang merupakan salah satu alternatif terbaik saat ini. Selain sangat cepat diakses, Material Design Icons ini 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

Apa itu Material Design Icons?

Ikon sistem desain material yang sederhana, modern, responsif, dan unik. Setiap ikon yang dibuat dengan menggunakan panduan desain material untuk menggambarkan dalam bentuk yang sederhana dan minimal konsep universal yang biasa digunakan di seluruh UI. Memastikan keterbacaan dan kejelasan pada ukuran besar dan kecil, ikon ini telah dioptimalkan agar tampilan cantik dan menarik pada semua platform umum dan resolusi tampilan.

Font ikon untuk Situs atau Blog

Font Material Design Icons adalah cara termudah untuk menggabungkan ikon material dengan proyek situs atau blog. Google telah memaketkan semua Material Design Icons ke dalam satu huruf yang memanfaatkan kemampuan perapaan tipografi browser modern sehingga pengembang situs dapat dengan mudah menggabungkan ikon-ikon ini hanya dengan beberapa baris kode.

Tutorial Memasang Material Design Icons Style UI by Google

Metode penggunaannya pun tidak hanya paling nyaman, tetapi juga efisien:

  • 900+ ikon semua dari satu, file kecil.
  • Disajikan dari server Google Web Font atau dapat dihosting sendiri.
  • Didukung oleh semua browser web modern.
  • Berwarna, berukuran dan diposisikan sepenuhnya dengan CSS.
  • Berbasis vektor: Terlihat hebat pada skala apa pun, tampilan retina, layar tampilan rendah-dpi.
Material Design Icons ini hanya berukuran 42KB dalam format woff2 terkecil dan 56KB dalam format woff standar. Sebagai perbandingan, file SVG yang dikompresi dengan gzip umumnya berukuran sekitar 62KB, tetapi ini dapat dikurangi dengan hanya meng-compile ikon yang Anda butuhkan ke dalam file SVG tunggal dengan sprite simbol.

account_circlefeedbackhomecommentandroid

Tutorial Memasang Material Design Icons Style UI by Google:

Langkah Pertama letakan Google Web Fonts di bawah ini tepat di atas kode </head>

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

Selain Menggunakan Web Fonts, sobat juga bisa menggunakan @font-face letakan di atas kode ]]></b:skin> atau </style>

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align:middle;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

Selanjutnya Buka https://design.google.com/icons/

Pilih Icon yang ingin di gunakan pada situs kalian...

Material Icons Tutorial

Rekomendasi untuk penggunaan HTML Material Icons, Gunakan HTML seperti gambar di bawah ini.

Rekomendasi HTML Material Icons
Rekomendasi HTML Material Icons

Contoh HTML penggunaan Material Icon

<i class='material-icons'>account_circle</i>


Material Icons Tutorial 2

Untuk memperbesar ukuran icon kalian hanya perlu menambah CSS berikut, kalian tidak wajib untuk mengikuti tutorial CSS berikut, karena icon akan otomatis menyamai ukuran font pada link yang sudah lebih dahulu menggunakan font-size:

.material-icons.md-18{font-size:18px}
.material-icons.md-24{font-size:24px}
.material-icons.md-36{font-size:36px}
.material-icons.md-48{font-size:48px}

dan juga ubah kode html icon menjadi seperti di bawah ini:

account_circle <i class="material-icons md-18">account_circle</i>
account_circle <i class="material-icons md-24">account_circle</i>
account_circle <i class="material-icons md-36">account_circle</i>
account_circle <i class="material-icons md-48">account_circle</i>

md-18, 18 adalah ukuran font.

Untuk memasang Material Icons melalui CSS :before dan :after, contoh kodenya seperti di bawah ini:

.cobatest:after{content:"account_circle";font-family:Material Icons;font-style:normal;font-weight:400;text-decoration:inherit}
.cobatest:before{content:"account_circle";font-family:Material Icons;font-style:normal;font-weight:400;text-decoration:inherit}

Tutorial Lengkapnya : Google Github

Demikian lah Tutorial Memasang Material Design Icons Style UI by Google yang bisa saya bagikan kali ini,semoga bisa bermanfaat dan mempercantik tampilan situs kalian.
Antonio Ferguso

Saya hanyalah seorang blogger pemula yang suka mengintai para senior blogger lewat postingan mereka, untuk mempelajari hal baru tentang dunia blogger yang masih belum saya mengerti. Jadi tidak ada salahnya mengintai untuk hal kebaikan dan kebenaran :D

Berkomentar adalah hak asasi bagi semua pengguna internet dan akan berdampak kembali kepada diri masing - masing, maka berkomentar dengan bahasa yang baik dan sopan adalah suatu hal positif dan sangat dianjurkan.