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 dipakai oleh para webmaster untuk websitenya. 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 arahan 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 arahan 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 arahan berikut ini sebelum arahan
<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 absurd dengan arahan pemanggilan icon FA menyerupai 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 acuan 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 pola 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 kesannya ialah menyerupai di bawah ini:
This is Solid Icon with CSS ::before
This is Solid Icon with CSS ::after
Sangat gampang kan? Jika anda masih gundah dalam penerapannya, aku sudah menyebarkan demo di codepen, silakan klik button di bawah ini.
Demo
Selamat mencoba :) jangan lupa baca artikel Alternatif Font Awesome
