Mengatasi Icon SVG Tidak Sejajar
Ketika saya mengutak-atik theme Jekyll dari Ockham ini saya menyadari bahwa theme ini menggunakan icon dari Font-Awesome. Padahal saya paling anti karena beban load dan resource yang tinggi dari CSS eksternal. Solusinya ya menghapus script Font Awesome dan mengganti icon dengan jenis SVG.
Beruntung Font Awesome berbaik hati menyediakan varian SVG dari setiap icon-nya sehingga saya tinggal copy-paste aja. Tapi masalah muncul yakni posisi icon SVG tidak sejajar (inline) dengan teks. Jadi apabila ada icon SVG yang berada di tengah-tengah teks seperti ini maka biasanya posisi icon akan lebih naik ke atas alias mengambang.
Buat para master dan yang sudah biasa dengan CSS ini bukan masalah, tapi saya yakin banyak pemula yang kelabakan bagaimana cara mengatasinya. Padahal solusinya gampang kok. Cukup tambahkan script berikut pada CSS utama theme kamu :
svg {
vertical-align: -3px;
}Kamu bisa mengubah value dari vertical align untuk disesuaikan dengan theme yang kamu pakai. Gampang kaaann…