Skip to content Skip to sidebar Skip to footer

Tutorial Menambah icon pada blogger menggunakan font awesome dan svg

cara menambah icon blogger font awesome dan svg

Pada tutorial kali ini saya ingin berbagi cara menambahkan icon pada blogger. Kenapa harus menggunakan icon ? ya menambah kesan user friendly aja kepada pengunjung sekaligus menambah cantk pada desain blog kita.
Ada 2 cara untuk menambahkan icon pada blogger, yaitu menggunakan font awesome atau svg. Lalu apa perbedaan dari kedua icon ini ? kita akan bahas lebih detail di dalam artikel ini.

Icon Font Awesome

Kita bisa menggunakan font awesome untuk menambahkan icon pada blog kita. Font Awesome sendiri merupakan font khusus yang digunakan untuk membuat sebuah icon di dalam web. 

Dengan adanya font awesome ini kita gak perlu menggunakan icon berekstensi JPG, PNG dan sejenisnya menggunakan gambar. Adapun beberapa kelebihan dan kekurangan dari font awesome adalah sebagai berikut.

Kelebihan Font Awesome

  • Penggunaanya sangat mudah
  • Banyak icon yang disediakan dan selalu up to date untuk iconya
  • Tersedia fitur icon gratis

Kekurangan Font Awesome

  • Icon premium harus berbayar
  • Resource besar sehingga memperlambat kecepatan blog

Cara Menggunakan Font Awesome

  • Masuk ke pengaturan Template kemudian pilih Edit HTML
  • Cari tag </head>
  • Masukan code script dibawah ini tepat diatas tag</head>
  • Kemudian simpan

Font Awesome sudah terpasang di blog kita dan bisa digunakan. Lalu bagaimana cara untuk menampilkan Icon di Blog kita ? 

  • Silahkan pergi ke Font Awesome Cheatsheet
  • Pilih salah satu icon yang akan kalian gunakan
  • Secara dasar code untuk menampilkan font awesome seperti dibawah ini
  • untuk mengganti icon cukup ganti fa-desktop dengan font lain sesuai kebutuhan kamu

Icon SVG

Berbeda dengan font awesome, svg merupakan sebuah icon yang ditulis persis dengan HTML dan CSS. Lantas apa yang membedakan SVG dengan Font Awesome ? kita akan bahas perdaan icon SVG dengan Font Awesome.
 

Perbedaan SVG dengan Font Awesome

Perbedaan SVG dengan Font Awesome sangat terlihat. Dari segi syntax dan kecepatan mungkin akan memiliki perbedaan dengan fot awesome.

Untuk kerapian dalam menulis syntax Font Awesome sangat diunggulkan karna hanya cukup menulis class saja kamu sudah dapat menampilkan icon yang dibutuhkan. Hal tersebut berbanding terbalik dengan SVG.

SVG memiliki syntax yang sangat panjang dan membuat codingan kita tidak rapi karna pada dasarnya SVG mirip seperti TAG HTML. Untuk masalah kecepatan SVG sangatlah unggul karna berjalan sendiri di blog kita 

Cara Menggunakan SVG

  • Untuk menggunakan SVG sangatlah mudah, silahkan kunjungi website material design
  • Pilih salah satu icon yang ingin digunakan 
  • Klik icon </> kemudian pilih view SVG dan copy code yang disediakan seperti contoh dibawah ini
  • Kemudian kamu cukup memasukan code tadi langsung kedalam blog kamu dan simpan

Untuk  merubah lebar, tinggi dan warna kamu hanya perlu mengganti pengaturan dibawah ini :


  1. Width:24px; Height:24px silahkan ganti dengan ukuran yang kalian mau.
  2. fill silahkan ganti dengan warna icon yang diinginkan

Itulah cara untuk menambah icon pada blog kita. Jika ada pertanyaan tentang tutorial kali ini silahkan kirim pada kolom komentar.
Nanda Krisbianto
Nanda Krisbianto Industri & Software Engineer, Penulis, Pebisnis muda.

Post a Comment for "Tutorial Menambah icon pada blogger menggunakan font awesome dan svg"