Cara menggunakan dan memanggil font awesome
Terima kasih sobat blogger, telah berkunjung ke dalam blog sederhana milik saya, kali ini masrodi akan memberikan lagi sedikit ilmu yang mungkin cukup bermanfaat untuk kita sebagai seorang yang suka dengan dunia blogging, mengutak-atik bentuk atau tampilan suatu blog sehingga blog yang kita milki menjadi sesuai dengan apa yang kita inginkan, perlu kita ketahui kembali untuk sekedar mengingatkan saja, dalam merubah suatu tampilan website ini memang sedikit mempengaruhi masalah SEO pada blog miliki kita, sehingga kemungkinan kecil sedikit mempengaruhi peringkat web milik kita.
Apa itu fontawesome?
Di artikel ini kita akan membuat suatu icon Fontawesome dan menetapkanya di dalam blog milik kita tentunya, sebelum kita berlanjut menggunakan fontawesome ini, ada baiknya kita tahu "apa itu font awesome"? fontawesome merupakan suatu bentuk icon yang di tetapkan pada blog untuk memperindah blog kita, dalam menggunkan fontawesome ini kita perlu menambahkan CSS pada template yang kita milki untuk dapat memanggil kode icon tersebut yang akan kita pergunakan, untuk menambahkan CSS berikut caranya.
Menambahkan font awesome pada blog :
Buka website resmi yang di miliki oleh font awesome di bawah ini
https://fontawesome.com - Setelah terbuka pada jendela homepage dari font awesome ini silahkan pilih menu start for free
- Masukan email milik kita pada jendela yang baru terbuka.
- Buka kota email masuk pada kotak email yang di daftarkan.
- Klik konfirmasi dan akan membuka masukan pasword.
- Masukan pasword yang akan kita buat.
- Masukan nama pada kotak yang harus disi kemudian simpan.
- kemudian tampil kode seperti di bawah :
<script src="https://kit.fontawesome.com/######.js" crossorigin="anonymous"></script>
- Untuk kode yang berwarna merah merupakan kode yang berbeda pada setiap akun dan bisa di ganti dengan akun fontawesome milik kita sendiri.
- Buka blog milik kita yang akan di pasang fontawesome tersebut letakan dianta tag <head> </head>
- Jika kita memilki css font awesome versi lama, coba kalian hapus dahulu agar tidak terjadi bentrok
- Kemudian simpan/save.
Di atas hanya menempatkan kode css dari font awesome yang akan kita letakan pada blog milk kita, untuk pemanggilan dari kode tersebut bisa kita coba lakuan dengan cara
Cara menggunakan dan memanggil icon Fontawesome.
Untuk hal pertama kita lakukan adah memilih penempatan icon itu sendiri akan kita pasangkan dimana?, apakah pada sebuah artikel ataupun pada sebuah template yang akan kita pergunakan, untuk menmpatkan icon pada font awesome ini, gunakan mode html pada artikel maupun template blog untuk dapat menempatkan icon font awesome ini,
- Kemudian buka website yang berisi banyak icon dari font awesome di bawah ini :
https://fontawesome.com/icons
- Silahkan kita pilih icon mana yang akan kita pergunakan.
- Sebagai contoh masrodi mengambil kode font awesome di bawah ini :
<i class="fas fa-address-card"></i>
- Yang hasilnya seperti gambar di bawah :
Mengatur ukuran icon fontawesome
Untuk ukuran besar kecilnya icon yang akan kita pergunakan silahkan tambahkan class ukuran itu sendiri
seperti contoh kode yang akan kita masukan sebesar 2x dan kita tinggal menambahkan class tersebut:
<i class="fas fa-address-card fa-2x">
berikut kode ukuran :
| Class | Ukuran |
|---|---|
| fa-xs | |
| fa-sm | |
| fa-lg | |
| fa-2x | |
| fa-3x | |
| fa-4x | |
| fa-5x | |
| fa-6x | |
| fa-7x | |
| fa-8x | |
| fa-9x | |
| fa-10x |
Di atas dalah bagaimana cara memasang icon font awesome pada blog milik kita sendiri, di sertai dengan besaran ukuran icon itu sendiri.
untuk tutorial blogging lainnya dari masrodi bisa lihat pada halaman link ini dan hapy blogging.
Posting Komentar untuk "Cara menggunakan dan memanggil font awesome"