Cara Terbaru Memasang Font Awesome 5 Pada Blogger
Tutorial Terbaru Memasang Font Awesome 5 Pada Blogspot
- Font Awesome merupakan WebFont icon terpopuler yang sudah banyak digunakan oleh para webmaster untuk websitenya. Font Awesome memungkinkan para webmaster untuk memasukan icon dengan menggunakan tag <i> tanpa harus menyisipkan gambar.
Hingga saat ini, Font Awesome yang dikembangkan oleh pengembangk Bootstrap ini sudah mencapai versi ke 5. Dimana sudah mensupport lebih dari 1000 icon yang bisa disisipkan pada DOM HTML.
Penggunaan Font Awesome sangat mudah, anda hanya perlu mengupload file yang di download secara gratis di fontawesome.io dan menguploadnya pada direktori website anda, atau cukup memanggilnya dengan menyisipkan tag <link> pada header halaman web.
Karena Blogger tidak mendukung untuk mengupload file (selain gambar/video), maka untuk menggunakan Font Awesome, anda cukup menyisipkan kode pada <head>.
Kali ini, saya akan membahas tutorial mengenai cara memasanh Font Awesome 5 pada Blogspot. Tutorial ini khusus bagi anda yang ingin menggunakan icon-icon yang support di Font Awesome 5 saja, karena ada beberapa perbedaan pemanggilan kode antara Font Awesome 5 dengan versi sebelumnya.
Menyisipkan Font Awesome 5 pada Blogger
Seperti yang saya jelaskan sebelumnya, untuk memasangnya pada Blogger, anda perlu memanggil Font Awesome 5 dengan menggunakan tag <link> dan ditempatkan pada header template Blogger anda. Silahkan copy dan paste kode berikut ini sebelum kode
<head> atau </head><<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.3.1/css/solid.css' integrity='sha384-VGP9aw4WtGH/uPAOseYxZ+Vz/vaTb1ehm1bwx92Fm8dTrE+3boLfF1SpAtB1z7HW' rel='stylesheet'/> <link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.3.1/css/brands.css' integrity='sha384-rf1bqOAj3+pw6NqYrtaE1/4Se2NBwkIfeYbsFdtiR6TQz0acWiwJbv1IM/Nt/ite' rel='stylesheet'/> <link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.3.1/css/fontawesome.css' integrity='sha384-1rquJLNOM3ijoueaaeS5m+McXPJCGdr5HcA03/VHXxcp2kX2sUrQDmFc3jR5i/C7' rel='stylesheet'/>
Kemudian klik SAVE template.
Memanggil Icon Font Awesome 5 dengan <i>
Jika anda pernah menggunakan Font Awesome 4.x.x, mungkin anda sudah tidak asing dengan kode pemanggilan icon FA seperti di bawah ini:
<i class="fa fa-lock" aria-hidden="true"></i>
<i class="fas fa-lock"></i>
Ada 3 jenis icon pada FA 5, yaitu Solid, Regular (Pro), dan Brands. Silahkan eksplore sendiri di halaman referensi yang saya sebutkan.
Referensi:
Icon Font Awesome 5:
https://fontawesome.com/iconsMenggunakan Font Awesome 5 dengan Pseudo Element (CSS)
Pseudo Element pada CSS digunakan untuk menata bagian-bagian tertentu dari suatu elemen. Misalnya, dapat digunakan untuk:
- Beri gaya huruf pertama, atau garis, dari suatu elemen
- Masukkan konten sebelum, atau sesudah, konten dari suatu elemen
Anda dapat menggunakan Font Awesome 5 menggunakan CSS ::after dan ::before untuk menyisipkan icon sebelum atau sesudah elemen website. Akan saya beri contoh penggunaanya di bawah ini:
Kode HTML untuk memanggil icon:
<span class='solid'> This is Solid Icon with CSS ::before</span>
<span class='brands'> This is Solid Icon with CSS ::after </span>
CSS ::after dan ::before untuk penerapan icon (Solid free dan Brands)
.solid::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007"; }
.brands::after { font-family: "Font Awesome 5 Brands"; font-weight: 900; content: "\f37c"; } Maka hasilnya adalah seperti di bawah ini:
This is Solid Icon with CSS ::before
This is Solid Icon with CSS ::after
Sangat mudah kan? Jika anda masih bingung dalam penerapannya, saya sudah membuatkan demo di codepen, silakan klik button di bawah ini.
Demo
Selamat mencoba :) jangan lupa baca artikel Alternatif Font Awesome