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.

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 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 Menggunakan dan Memsang Font Awesome di Blogger

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
Cara Menggunakan dan Memasang Font Awesome di Blog atau Website
  • 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
Cara Menggunakan dan Memasang Font Awesome di Blog atau Website
  • 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
Cara Menggunakan dan Memasang Font Awesome di Blog atau Website


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/. 
Cara Menggunakan dan Memasang Font Awesome di Blog atau Website
  • Pilih icon yang akan kalian gunakan, kemudian klik pada panah kecil (dibagian copy) dan klik menu HTML Tag
Cara Menggunakan dan Memasang Font Awesome di Blog atau Website
  • 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'/>&#160;Blogger</a></li>
<li><a href='link url kalian' target='_balnk'><i class='fa fa-wordpress'/>&#160;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
Cara Menggunakan dan Memasang Font Awesome di Blog atau Website
  • 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
Cara Menggunakan dan Memasang Font Awesome di Blog atau Website
  • 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
Cara Menggunakan dan Memasang Font Awesome di Blog atau Website
  • 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>&#160;Blogger</a></li>
<li><a href='link url kalian' target='_balnk'><i class="fab fa-accusoft"></i>&#160;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
Cara Menggunakan dan Memasang Font Awesome di Blog atau Website
  • 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

0 Response to "Cara Menggunakan dan Memasang Font Awesome di Blog atau Website"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2