Cara Gampang Memasang Font Awesome Pada Blogger
Tutorial Cara Pasang Font Awesome 5 Di Blogspot
- Font Awesome yaitu WebFont icon terpopuler yang sudah banyak dipakai oleh para webmaster untuk Theme/Template sebuah blog atau website. Font Awesome memungkinkan para webmaster untuk memasukan icon dengan memakai tag <i> tanpa harus menyisipkan gambar.
Hingga dikala ini, Font Awesome yang dikembangkan oleh pengembangk Bootstrap ini sudah mencapai versi ke 5. Dimana sudah mensupport lebih dari 1000 icon yang sanggup 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 memakai Font Awesome, anda cukup menyisipkan aba-aba pada <head>.
Kali ini, aku akan membahas tutorial mengenai cara memasanh Font Awesome 5 pada Blogspot. Tutorial ini khusus bagi anda yang ingin memakai icon-icon yang support di Font Awesome 5 saja, alasannya ada beberapa perbedaan pemanggilan aba-aba antara Font Awesome 5 dengan versi sebelumnya.
Menyisipkan Font Awesome 5 pada Blogger
Seperti yang aku jelaskan sebelumnya, untuk memasangnya pada Blogger, anda perlu memanggil Font Awesome 5 dengan memakai tag <link> dan ditempatkan pada header template Blogger anda. Silahkan copy dan paste aba-aba berikut ini sebelum aba-aba
<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 memakai Font Awesome 4.x.x, mungkin anda sudah tidak gila dengan aba-aba pemanggilan icon FA menyerupai di bawah ini:
<i class="fa fa-lock" aria-hidden="true"></i> Related
<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 aku sebutkan.
Referensi:
Icon Font Awesome 5:
https://fontawesome.com/iconsMenggunakan Font Awesome 5 dengan Pseudo Element (CSS)
Pseudo Element pada CSS dipakai untuk menata bagian-bagian tertentu dari suatu elemen. Misalnya, sanggup dipakai untuk:
- Beri gaya abjad pertama, atau garis, dari suatu elemen
- Masukkan konten sebelum, atau sesudah, konten dari suatu elemen
Anda sanggup memakai Font Awesome 5 memakai CSS ::after dan ::before untuk menyisipkan icon sebelum atau sehabis elemen website. Akan aku beri referensi 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 balasannya yaitu menyerupai di bawah ini:
This is Solid Icon with CSS ::before
This is Solid Icon with CSS ::after
Semoga Bermanfaat.
