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 :