Beralih ke Google Material Icons (Dan Masalahnya)

Setelah dipikirkan dengan cara seksama, akhirnya sudahpun diputuskan untuk menggunakan Google Material Icons pada sejumlah detil tampilan pada blog utama, wahyu.web.id ; Otomatis hal tersebut akan menggantikan peran Font Awesome yang selama beberapa waktu ini digunakan. Terima kasih, some...

Alasan perubahan tersebut sederhana saja, yakni agar seminimal mungkin memanggil atau menggunakan aplikasi pihak ketiga, dan lebih memaksimalkan segala sesuatunya berada pada host milik google, sebagaimana engine blogging yang digunakan (blogspot). Sebenarnya bisa saja menggunakan font awesome, dan menggunakan google drive, tapi malas. *manusiawi*.

Google Material Icons

Hanya saja ternyata, proses perubahan itu tidak berjalan semulus yang dibayangkan. Terdapat beberapa permasalahan yang ditemui. Dua permasalahan yang diketemukan adalah:

1. Koleksi ikon yang ada pada google material ikon tidak sebagaimana yang terdapat pada font awesome; dan
2. Proses perataan vertikal yang agak rumit.

Untuk permasalahan pertama, yakni menyangkut koleksi ikon, ya memanglah nampaknya font awesome lebih variatif. Sampai dengan saat ini misalnya, material icons tidak menyediakan ikon layanan jejaring sosial. Selain itu juga terdapat sejumlah varian ikon lain yang tidak sekumplit font awesome. Namun soal ini tidak terlalu prinsip, atau masih bisa dikompromikan dengan solusi lain.

Sementara untuk persoalan kedua, yakni menyangkut perataan vertikal (vertical align), nah ini yang agak repot. Akhirnya, untuk mengatasi hal ini, setelah baca-baca beberapa sumber, dan melakukan ujicoba, akhirnya dilakukanlah penyesuaian CSS agar sesuai dengan keinginan. Secara prinsip, kode CSS dasar yang digunakan adalah yang diberikan oleh google, yakni sebagai berikut:

.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 18px;
display: inline-block;
vertical-align: middle;
margin-bottom:5px;
line-height: 1;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* 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';
}

Pada baris-baris berwarna merah tersebutlah dilakukan penyesuaian, sehingga tampilan dapat sesuai dengan keinginan. Baris vertical-align dan margin-bottom memang ditambahkan kemudian atau ditambahkan sendiri saja, ya sekali lagi, menyesuaikan dengan keinginan. Sehingga tentu saja untuk setiap orang ada kemungkinan akan berbeda pengaturannya, sesuai dengan kehendak masing-masing.

Jadi, demikianlah malam ini. Sembari menunggu koneksi telepon dan internet di rumah yang sedang mati total akibat kabel milik Telkom yang putus gegara pekerjaan galian milik PDAM Intan, dan terpaksa online dengan menggunakan tethering ponsel.

Sebelum log-out, mungkin bagi yang ingin baca tentang Google Material Icons, Font Awesome, maupun Bootstrap Glyphicons, bisa klik itu tautaannya barusan.