Cara Menggunakan dan Memasang Font Awesome di Blog atau Website
komputerdia.com - Font Awesome adalah sebuah plugin stylesheet (CSS) yang difungsikan untuk menampilkan icon-icon vector atau simbol dengan efektif pada sebuah situs website. Font Awesome merupakan sekumpulan ikon yang dikemas dalam bentuk vector dan scalable, artinya icon ini tidak dapat pecah dalam ukuran atau size berapapun.
Selain pengertian diatas, ada juga yang mendefinisikan jika Font Awesome adalah suatu framework CSS yang difungsikan untuk membuat ikon atau simbol pada sebuah website/blog. Eksistensi font awesome saat ini bisa dinilai sangat membantu banyak web developer untuk membantu dalam masalah pengaplikasian ikon pada suatu website. Jika kita menggunakan font awesome, maka perintah yang dilakukan cukup dengan memanggil Font Awesome ke dalam website, berbagai jenis ikon keren bisa langsung dipakai tanpa harus membuatnya secara manual seperti dulu. Lebih uniknya lagi, icon di plugin ini tersedia dalam kemasan Font. sehingga bisa kita kustom dengan berbagai warna, shadow (bayangan) dan efek lainnya hanya dengan kode CSS saja.
Selain pengertian diatas, ada juga yang mendefinisikan jika Font Awesome adalah suatu framework CSS yang difungsikan untuk membuat ikon atau simbol pada sebuah website/blog. Eksistensi font awesome saat ini bisa dinilai sangat membantu banyak web developer untuk membantu dalam masalah pengaplikasian ikon pada suatu website. Jika kita menggunakan font awesome, maka perintah yang dilakukan cukup dengan memanggil Font Awesome ke dalam website, berbagai jenis ikon keren bisa langsung dipakai tanpa harus membuatnya secara manual seperti dulu. Lebih uniknya lagi, icon di plugin ini tersedia dalam kemasan Font. sehingga bisa kita kustom dengan berbagai warna, shadow (bayangan) dan efek lainnya hanya dengan kode CSS saja.
Dengan memanfaatkan Font Awesome, kita dapat membuat ikon yang lebih keren dan menarik dengan hanya menggunakan teks (tanpa adanya gambar) sehingga bisa meningkatkan akselerasi atau kecepatan blog. Sesuai dengan namanya Font Awesome menunjukkan bahwa fitur ini merupakan suatu font (huruf) istimewa, sehingga dengan mudah kita dapat melakukan perubahan warna dan ukuran dengan bantuan dari kode CSS. Hal yang paling penting adalah bahwa huruf atau font awesome ini berbentuk ikon dan dapat terlihat dengan baik pada setiap perangkat (responsive)
Font awesome sendiri memiliki beberapa keunggulan yang menjadikan fitur ini banyak sekali diminati para web developer, diantaranya :
Font awesome sendiri memiliki beberapa keunggulan yang menjadikan fitur ini banyak sekali diminati para web developer, diantaranya :
- Font Awesome gratis dan bebas digunakan oleh siapapun untuk memenuhi kebutuhan apapun.
- Mempunyai ratusan ikon keren yang cocok digunakan untuk blog pribadi sampai website profesional.
- Dapat bekerja dengan semua jenis framework CSS lainnya seperti Bootstrap.
- Compatible di banyak jenis browser.
- Dokumentasi sangat lengkap.
- Proses instalasi mudah dan tidak membutuhkan Javascript tambahan atau kode-kode lainnya.
- Penggunaan mudah, cukup menambahkan nama ikon pada class HTML atau unicode pada CSS pseudo-elements.
- Ringan dan tidak memberatkan kinerja dari suatu blog/website.
Cara Memasang Font Awesome di Blog
1. Langkah Pemasangan Script Font Awesome
- Silahkan kalian login ke akun blogger kemudian masuk ke menu Tema dan klik tombol Edit HTML
- Selanjutnya, kalian pasang script font awesome di template kalian dengan cara letakkan kode dibawah ini tepat diatas kode </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
- Jika kalian ingin menggunakan kode font awesome yang lebih update, silahkan kalian kunjungi halaman https://fontawesome.com/ dan klik tombol start for free
- Langkah selanjutnya silahkan kalian masukkan email untuk melakukan aktivasi pada kolom enter your email to create your first kit kemudian tekan tombol Send kit code
- Setelah itu kalian cek email masuk dan klik link verifikasi yang diberikan
- Jika verifikasi berhasil dilakukan kalian akan diarahkan kehalaman seperti pada gambar dibawah ini, dan silahkan copy kode font awesome yang diberikan kemudian pasang kode tersebut tepat diatas kode </head> pada template kalian
2. Langkah Penerapan Font Awesome di Blogger
- Sebelum melakukan penerapan font awesome, sebaiknya kalian lakukan riset terlebih dahulu pada blog kalian, dibagian manakah font awesome akan kalian terapkan
- Pada umumnya font awesome ini diterapkan pada bagian menu navigasi, widget, related post atau bahkan menu-menu lainnya yang akan kalian modifikasi
- Dalam tutorial ini, saya akan mencontohkan penerapan font awesome pada bagian menu navigasi blog
- Langkah awal silahkan kalian kunjungi situs penyedia font awesome, disini saya menggunakan situs https://fontawesome.bootstrapcheatsheets.com/.
- Pilih icon yang akan kalian gunakan, kemudian klik pada panah kecil (dibagian copy) dan klik menu HTML Tag
- Selanjutnya silahkan kalian masuk ke menu tema kemudian klik tombol edit html
- Cari bagian menu navigasi yang akan kalian tambahkan font awesome, kemudian letakkan kode HTML Tag tersebut tepat setelah penerapan link, berikut ini adalah contohnya
<li><a href='link url kalian' target='_balnk'><i class='fa fa-rss-square'/> Blogger</a></li> <li><a href='link url kalian' target='_balnk'><i class='fa fa-wordpress'/> Wordpress</a></li>
- Kode berwarna merah adalah kode tag html yang tadi di salin pada situs font awesome
- Silahkan kalian ganti kode tersebut dengan kode font awesome yang kalian inginkan
- Jika kalian menginginkan ada jarak spasi antara font awesome dengan nama menu, silahkan kalian gunakan kode dibawah ini
<li><a href='link url kalian' target='_balnk'><i class='fa fa-rss-square'/> Blogger</a></li> <li><a href='link url kalian' target='_balnk'><i class='fa fa-wordpress'/> Wordpress</a></li>
- Kode berwarna merah adalah kode tag html yang tadi di salin pada situs font awesome, silahkan kalian ganti dengan font awesome yang kalian inginkan
- Kode berwarna biru adalah kode spasi yang akan memberikan jarak antara font awesome dengan teks
- Sebagai contoh, saya akan melakukan pemasangan font awesome di blog komputerdia.com pada menu navigasi
- Simpan tema dan lihat hasilnya
- Untuk contohnya, kalian bisa lihat pada bagian menu navigasi blog ini
- Selesai dan semoga bermanfaat untuk kalian semuanya
3. Penerapan Font Awesome Cara Lain
Untuk penerapan dibagian ini sebenarnya masih sama dengan cara penerapan dibagian atas, hanya saja berbeda pada bagian situs penyedia layanannya saja. Pada bagian trik ini saya menggunakan layanan dari situs https://fontawesome.com/
- Langkah pertama silahkan kaian masuk ke halaman font awesome versi gratis, yang dapat diakses melalui https://fontawesome.com/icons?d=gallery&m=free
- Setelah itu kalian akan melihat tampilan seperti gambar dibawah ini, kemudian pilihlah ikon yang akan digunakan
- Setelah melakukan pemilihan ikon yang akan digunakan, kalian akan diarahkan pada halaman seperti pada gambar dibawah ini
- Silahkan kalian copy kode tersebut pada bagian html code
- Selanjutnya silahkan kalian masuk ke menu tema kemudian klik tombol edit html
- Cari bagian menu navigasi yang akan kalian tambahkan font awesome, kemudian letakkan kode HTML Tag tersebut tepat setelah penerapan link, berikut ini adalah contohnya
<li><a href='link url kalian' target='_balnk'><i class="fab fa-accusoft"></i> Blogger</a></li> <li><a href='link url kalian' target='_balnk'><i class="fab fa-accusoft"></i> Wordpress</a></li>
- Kode berwarna merah adalah kode tag html yang tadi di salin pada situs font awesome
- Silahkan kalian ganti kode tersebut dengan kode font awesome yang kalian inginkan
- Jika kalian menginginkan ada jarak spasi antara font awesome dengan nama menu, silahkan kalian gunakan kode dibawah ini
<li><a href='link url kalian' target='_balnk'><i class="fab fa-accusoft"></i> Blogger</a></li> <li><a href='link url kalian' target='_balnk'><i class="fab fa-accusoft"></i> Wordpress</a></li>
- Kode berwarna merah adalah kode tag html yang tadi di salin pada situs font awesome, silahkan kalian ganti dengan font awesome yang kalian inginkan
- Kode berwarna biru adalah kode spasi yang akan memberikan jarak antara font awesome dengan teks
- Setelah semua pengaturan telah kalian buat, selanjutnya kalian tekan tombol simpan tema dan lihat hasilnya
- Semoga artikel ini bermanfaat untuk kalian semuanya
4. Memasang Unicode Font Awesome di CSS
Untu melakukan pemasangan font awesome pada css, memang sedikit berbeda dari cara yang telah saya jelaskan diatas. Jika diatas menggunakan html code maka pada penerapan css kode yang digunakan adalah unicode.
- Untuk mendapatkan unicode font awesome kalian bisa mendapatkannya di beberapa alamat link berikut
- https://fontawesome.com/cheatsheet/free/solid
- https://fontawesome.com/cheatsheet/free/regular
- https://fontawesome.com/cheatsheet/free/brands
- Untuk penerapannya sendiri, saya contohkan sebagai berikut
.quote:before {
content: "\f109";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 20px;
display: inline-block;
margin-right: 3px;
}
- Silahkan kalian ganti kode berwarna merah dengan unicode font awesome yang kalian inginkan.
- Contoh unicode awesome adalah seperti yang tertera pada gambar yang saya berikan tanda merah
- Selesai semoga bermanfaat untuk kalian semuanya
makasih gan
ReplyDelete