Fungsi Dan Cara Memakai Font Awesome

By | Oktober 22, 2017
 diukur dari kecepatan loading dan performa dari blog tersebut Fungsi dan Cara Menggunakan Font Awesome
Font Awesome Logo
Selain performa blog yang mantap, diukur dari kecepatan loading dan performa dari blog tersebut. masih ada satu faktor lain yang mengakibatkan blog atau website anda tampil menarik. yaitu dengan menambahkan icon-icon dari font Awesome.

Font Awesome akan mengakibatkan tampilan blog anda tambah menarik.

Pengertian Font awasome yang ambil dari situsnya langsung

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. (Sumber : Font Awasome)

Kalau diartikan secara agresif menjadi begini
Font Awesome memberi Anda ikon vektor terukur yang sanggup pribadi diadaptasi – ukuran, warna, bayangannya, dan segala yang sanggup dilakukan dengan kekuatan CSS. 
Itulah Penjelasannya, Makara font awasome merupakan salah satu situs penyedia Icon dalam bentuk vektor yang nantinya sanggup diolah kedalam Tamplate Blog anda sehingga menghasilkan tampilan yang menarik (setelah penyesuaian pada CSS tentuhnya). Kegunggulan dari font awasome sangat bermacam-macam, antara lain :
  1. Mempunyai koleksi icon vector yang banyak dan uptodate
  2. Gratis untuk penggunaan komersil
  3. Bisa berjalan di segala platfom
  4. Tidak memerlukan Java Script
  5. Pengaturan melalui CSS
  6. Desktop Freadly
  7. Sempurna pada tampilan tingkat tinggi, dll

Melihat Katalog Font Awasome
Fungsi
Penggunaan dari font awasome pada tamplate dunia maya yakni sebagai salah satu icon vector yang sanggup dipakai pada website ataupun pada tamplate blog. Font Awasome biasanya dipakai pada hidangan navigasi web. dan pada menu-menu lain yang membutuhkan tampilan yang menarik. Misalnya pada icon pada share button pada blog kami ini.
 diukur dari kecepatan loading dan performa dari blog tersebut Fungsi dan Cara Menggunakan Font Awesome
Icon pada share button pada blog ini memakai produk font awasome
Seperti yang anda lihat logo-logo dari perusaha yang kami munculkan pada hidangan share button di blog ini memakai fungsi font awasome, yang kami padu dengan CSS backgound dari tiap-tiap tombol. Selain itu kami berikan pula fungsi hover pada CSS sehingga menghasilkan tampilan yang menyala menyerupai yang kami kehendaki dikala icon tersebut di sorot pointer mouse.

fungsi hover pada CSS yakni meberikan nyala dikala sebuah link di sorot pointer mouse

Instalisasi pada tamplate blog
Langkah awal kita yakni dengan memasukkan instruksi panggil font awasome, pada tamplate anda. Letakkan instruksi dibawah ini pada belahan head blog anda. Posisinya diatas </haed>

 <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/> 

Cara mendapat icon dan menggunakannya
Setelah anda memasang instruksi untuk Font Awasome (kode di atas merupakan instruksi terbaru dikala artikel ini ditulis pada 02/11/2017). Langkah selanjutnya yakni anda mencari koleksi dari icon yang fingin anda gunakan katalog iconnya sanggup lihat katalog diatas!

Setelah anda menentukan ikon yang anda butuhkan selanjutnya anda tinggal melaksanakan klik saja pada ikon tersebut. Penulis beri rujukan sesudah masuk ke website font awasome dan buka katalog kami menentukan logo CSS 3 menyerupai yang terdapat pada gambar.

 diukur dari kecepatan loading dan performa dari blog tersebut Fungsi dan Cara Menggunakan Font Awesome
Bagian tampilan sesudah anda menentukan font awasome

Langkah berikutnya yakni memasukkan kode Unicode (dengan latar kuning) yang telah muncul dibawah gambar logo yang anda pilih. Tempatkan pada daerah yang anda ingin tampilan di template blog. Kode Nama fa-css3 (diingkari warna biru) akan dibahas dibawah (menampilkan font awasome pada postingan) cara memasukkannya yakni dengan memakai perintah

content:'(pastekan unicodenya disini rujukan unicode logo CSS 3 : f13c )’;font-family:fontawesome;

Menambahkan CSS pada Font Awasome Jika anda ingin menciptakan lebih besar maka anda hanya perlu memperberas ukuran fontnya saja (font-size: tentuhkan berap px atau em) Kami kira anda semua sudah tahu cara memperbesar abjad dalam barisan CSS. Jika anda ingin memberi warna tinggal masukkan perintah color:(tulis warna yang dikehendaki atau berupa instruksi HEX); pada CSS.

Agar lebih terang perhatikan rujukan dibawah ini

#related-post-desktop ul li:before{content:'f138';font-family:fontawesome;position:absolute;margin:0 0px 0 -25px;color:#4CAF50;overflow:hidden;transition:all .3s} #related-post-desktop ul li:hover:before{content:'f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite} 

Script CSS diatas merupakan salah satu dari penggalan CSS posting terkait yang ada pada blog ini.
Bagaimana ? Jelaskan sekarang.

Agar lebih menarik lagi anda sanggup menambahkan animasi

Langkah ini merupakan langkah opsional saja, bagi yang ingin. Bagi yang merasa tidak perlu sebaiknya tidak usah menambahkan.

menambahkan animasi atau @keyframe pada blog sanggup anda pelajari melalui blog-blog berikut

Mengapa tidak kami uraikan secara langsung? Karena jikalau dijabarkan akan lebih panjang lagi. Mungkin berikutnya sanggup kami lengkapi lagi melalui artikel lainnya.

Bisakah Menambahkan Font Awesome pada Postingan Blog?
Menempatkan font awasome pada postingan blog yang anda butuhkan yakni memanggilnya memakai tag i.  Formatnya menyerupai berikut <i class=”fa (spasi) nama font “></i>

Contoh : <i class=”fa fa-css3“></i> dipakai untuk memanggil

Jangan lupa ! untuk mengubah ke mode html terlebih dahulu 

 diukur dari kecepatan loading dan performa dari blog tersebut Fungsi dan Cara Menggunakan Font Awesome
Mengganti mode tulis dari compose ke html (klik goresan pena HTML)


Darimana instruksi tersebut?
Lihat gambar tampilan sesudah icon font awasome anda pilih (pada tampilan rujukan halaman pilihan css3) sebelum instruksi unicode (latar belakang kuning), pada belahan sebelumnya merupakan instruksi nama dari font awasome (kami beri tanda bulat warna biru). Gunakan nama dari font awasome tersebut yang dipakai untuk memanggil font ke dalam posting blog.

Perhatian, font awasome tidak akan muncul dikala anda memakai mode Compose pada dikala penulisan artikel. Hasilnya akan terlihat dikala dilakukan pratinjau atau dikala posting halaman tersebut diterbitkan.

========UPDATE 14 April 2018========
Setelah kami cek di awal tahun, ternyata situs Font Awesome mengalami perubahan signifikan dengan penambahan versinya menjadi versi 5. Memiliki koleksi tambah banyak dan administrasi koleksi yang lebih baik dari pendahulunya.

Permasalahan timbul dikala kita hendak memasang font awasome terbaru tersebut. Script yang disajikan mengalami perubahan dan font awasome 4.7.0 (tertinggi versi 4) sudah tidak kompatibel dikala anda mengganti kedalam versi 5. Perubahan yang sangat pesat tersebut ternyata kami cek di bulan April 2018 masih banyak mengalami beberapa hambatan khususnya dikala penulisan font awasome kedalam konten blog.

Langkah yang kami rekomendasi-kan :  sebaiknya jikalau pembaca sudah bersahabat dengan Font Awasome versi 4, pembaca tidak perlu susah-susah mengubah ke versi 5 alasannya akan menjadi pekerjaan yang usang (untuk mengeditnya)

Kabar jelek berikutnya yakni dalam web resmi font awasome katalog tipe usang (versi 4) sudah tidak dimunculkan lagi. yang ada yakni katalog versi 5 dengan perbuahan yang drastis pada pemuatan kodenya. Namun, pembaca tidak perlu bersedih. Setelah kami menilik ternyata masih ada katalog usang yang tersimpan dalam web resminya. Berikut alamatnya

Jika ada pertanyaan : Mengapa font awasome saya tidak keluar dikala update ke versi 5?
Jawabnya yakni Perbedaan instruksi yang dipakai untuk memasukkan input.

Kesimpulan
Font Awesome merupakan salah satu daerah penyedia ikon dalam bentuk font. Selain situs tersebut ada juga situs penyedia ikon lain serperti iconfinder.com. Menggunakan font Awesome bermanfaat untuk mempercantik tampilan blog kita tanpa adanya sentuhan-sentuhan yang memberatkan. Jika ada yang belum terang sanggup ditanyakan pada kolom komentar.

Terimakasih

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *