Cara Menggunakan dan Memasang Font Awesome di Blogger

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. 

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.

Font Awasome biasanya digunakan atau di terapkan pada pembuatan menu navigasi web, atau pada pembuatan menu-menu lainnya pada sebuah situs agar terlihat lebih menarik

Baca Juga Artikel Menarik Lainnya :

Cara Menggunakan dan Memsang Font Awesome di Blogger

Cara Memasang Font Awesome di Blog

A. 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'/>
  • Simpan template

B. Langkah Penerapan Font Awesome di Blogger

  • Sebelum melakukan penerapan font awesome, sebaiknya kalian lakukan riset terlebih dahulu pada blog kalian, dibagian manakan font awesome akan di 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 Font Awesome Bootstrapt. Kalian juga bisa mencari situs-situs lainnya sesuai dengan selera
Cara Menggunakan dan Memsang Font Awesome di Blogger
  • Pilih icon yang akan kalian gunakan, kemudian klik pada panah kecil (dibagian copy) dan klik menu HTML Tag
Cara Menggunakan dan Memsang Font Awesome di Blogger
  • 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='https://www.komputerdia.com/search/label/Blogger' target='_balnk'><i class='fa fa-rss-square'/>&#160;Blogger</a></li>
<li><a href='#' 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
  • Kode berwarna biru adalah kode spasi yang harus kalian pasang juga
  • Sebagai contoh, saya akan perlihatkan pemasangan font awesome di blog komputerdia.com ini
  • Simpan tema dan lihat hasilnya
  • Untuk contohnya, kalian bisa lihat pada bagian menu navigasi blog ini
  • Selesai dan semoga bermanfaat untuk kalian semuanya

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2