Cara Memasang Font-awesome Untuk Membuat Ikon pada Blog
Nyampling ~ Cara Memasang Font-awesome Untuk Membuat Ikon pada Web. Halo sobat nyampling ketemu lagi dah dengan blog saya, kali ini saya akan mengulas tentang font awesome. Sering kali kita melihat dalam suatu blog ada ikon yang bergambar. Ikon ini sebenarnya, kayak simbol atau logo kalau kita mengetik di word.
Ikon ini sebenarnya berfungsi untuk mempercantik dan juga dapat membuat format ikon animasi pada blog. Ikon ini juga disebut sebagai font awesome.
Font awesome ini dapat kalian gunakan secara gratis dan ada juga berbayar. Perbedaan keduanya tentu sangat mencolok karena ada beberapa ikon tambahan yang tidak bisa dipakai untuk versi gratisnya. Tapi menurut saya meskipun memakai versi gratis, kita sudah disajikan ikon - ikon yang keren untuk menghiasi blog.
Nah pada ulasan hari ini kita akan belajar bagaimana menggunakan font awesome ini dari tahap instalasi dan sampai memberikan efek animasinya. Simak tutorialnya ya...
Memasang Kode CSS Font Awesome
1. Silahkan menuju webiste font awesome yakni disini https://fontawesome.com/start. Kalian bisa memilih sign in untuk yang gratis maupun yang berbayar. Pada situs ini bila ada update terbaru maka kalian dapat mengambil kodenya. Untuk selanjutnya dipasang di html blog.
2. Copykan kode CSS yang diberikan ke Html Blog kalian, Login Blogger >> Setelan >> Edit Html >> <Head>.
Kode 1 Kalian dapat me-link kan kode css dibawah ini dengan html blog kemudian untuk menampilkan font awesome kalian tinggal memanggil / menulis Class-nya kedalam postingan artikel.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">Kode 2 Dapat kalian gunakan dengan memanfaatkan CDN, sehingga font awesome yang digunakan tanpa hosting
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
3. Kemudian klik Simpan, pada tahap ini kalian sudah memasang kode css font awesome di html blog kalian.
NOTE : Kalian bisa cek di template masing - masing untuk kode diatas bila sudah terpasang, maka kalian dapat melewati langkah diatas.
Memasang Font Awesome di Artikel atau Blog
1. Silahkan buka situs font awesome untuk memilih ikon. Pada tahap ini kalian dapat melihat bermacam - macam icon yang akan kalian pasang di blog. Kalian tinggal pilih ikon mana saja yang akan kalian pasang diblog
2. Pilih Icon dengan mengklik pada icon tersebut, sehingga akan muncul kode seperti ini <i class="fa fa-coffee"></i>
maka hasilnya
3. Untuk memperbesar ukuran kalian tinggal tambahkan fa-lg (33% lebih besar), fa-2x, fa-3x, fa-4x, dan fa-5x.
Contoh Penggunaan :
<i class="fa fa-coffee fa-2x"></i>
<i class="fa fa-coffee fa-3x"></i>
<i class="fa fa-coffee fa-4x"></i>
<i class="fa fa-coffee fa-5x"></i>
4. Untuk mengubah warna ikon kalian dapat menambahkan kode berikut ini
<p style="color: blue">
Teks ini berwarna biru dan juga ikon ini
<i class="fa fa-coffee fa-3x"></i> berwarna biru
</p>
Hasilnya
Teks ini berwarna biru dan juga ikon ini
berwarna biru
berwarna biru
5. Membuat ikon Animasi, Jika kalian mengunjungi blog biasanya ada bebrapa ikon yang bergerak, ikon bergerak ini dapat kalian buat dengan memasukkan kode tambahan seperti berikut:
Loading...<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i><span class="sr-only">Loading...</span>
Loading...<i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i><span class="sr-only">Loading...</span>
Loading...<i class="fa fa-refresh fa-spin fa-2x fa-fw"></i><span class="sr-only">Loading...</span>
Loading...<i class="fa fa-cog fa-spin fa-2x fa-fw"></i><span class="sr-only">Loading...</span>
6. Kalian tinggal tempelkan di html blog ataupun di html postingan artikel, Selesai dipasang kemudian lihat hasilnya.
Penutup
Demikian sedikit postingan tentang "Cara Memasang Font-awesome Untuk Membuat Ikon pada Web" Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Semoga postingan ini dapat bermanfaat.