Cara menggunakan Icon SVG didalam blogger

Hello sobat Desain jika anda sebelum nya tidak pernah mendengar atau mengetahui mengenai Icon SVG atau juga font Awesome maka kali ini saya akan memberikan informasi nya kepada anda

Apa itu SVG

SVG merupakan singkatan dari Scalable Vector Graphics yang digunakan untuk menciptakan sebuah Icon dari atau melalui sebuah gambar ataupungrafis

Terkhusus bagi kamu pengguna Blogger, dengan kamu menggunakan icon SVG membuat dan membantu loading blog kamu semakin cepat

Info: Biasanya Icon SVG ini sering digunakan oleh pengguna blogger untuk menambahkan Icon dalam Menu navigasi mereka

Font Awesome

Font Awesome (SVG) adalah suatu script kode pemanggil untuk memuat suatu elemen jika kita menyertakan kode perintah didalamnya

Jadi jika kamu memasang font Awesome untuk menampilkan SVG kamu harus menambahkan script kode dari font Awesome tersebut

Pemberitahuan: Nah untuk bisa mendapatkan script awesome tersebut, kamu harus menggunakan Hosting atau situs web yang menyediakan font Awesome khusus SVG

Nantinya kamu akan diarahkan untuk menyimpan script font Awesome tersebut didalam Template kamu untuk kamu gunakan, barulah kamu bisa menggunakan setiap icon yang tersedia didalamnya

Berbeda antara kamu menggunakan Font Awesome dengan Menggunakan SVG (Tanpa font Awesome), terlihat sekali perbedaannya didalam kode penampil iconnya, baca sampai selesai untuk lebih memahami nya

Contoh kode Icon SVG

Berikut adalah contoh dari kode icon SVG, sebagai berikut :

<svg style='width:24px;height:24px' viewBox='0 0 24 24'><path fill="WarnaHTML" d='M21,2H3A2,2 0 0,0 1,4V20A2,2 0 0,0 3,22H21A2,2 0 0,0 23,20V4A2,2 0 0,0 21,2M11,17.5L9.5,19L5,14.5L9.5,10L11,11.5L8,14.5L11,17.5M14.5,19L13,17.5L16,14.5L13,11.5L14.5,10L19,14.5L14.5,19M21,7H3V4H21V7Z'/></svg>

Pemberitahuan: Icon SVG biasanya diawali dengan kode <svg dan sebagai kode </svg> penutupnya

Tampilan dari SVG diatas adalah seperti contoh berikut ini

Ubah ukuran Icon

Untuk mengubah ukuran Icon SVGmudah sekali sobat desain, kamu hanya perlu mengatur didalam Tag width:24px dan Tag height:24px ubah ukuran menurut keinginan kamu ya 🌞

Nah dibawah ini adlaah contoh menurut ukuran dari SVG :

Info: SVG diatas menggunakan ukuran width:24px;height:24px

Info: SVG diatas menggunakan ukuran width:32px;height:32px

Ubah ukuran dengan CSS

Nah sobat desain juga bisa mengatur ukuran Icon SVG nya dengan menambahkan kode CSS seperti contoh dibawah ini :

.DL svg {
width:24px;
height:24px;
}

Ganti Warna Icon

Untuk mengganti warna defeult icon SVG nya, kamu bisa melihat Tag fill="WarnaHTML" dan kemudian berikan warna sesuai keinginan kamu dalam format warna HTML

Ganti warna dengan CSS

Mengganti atau mengatur warna Icon SVG nya kamu bisa menambahkan kode CSS seperti contoh Berikut ini

.DL svg path{
fill: white;
}

Cara menggunakan Icon SVG

Jika kamu pengguna Blogger dan ingin menggunakan Icon SVG didalam blog kamu, seperti untuk menambahkan Icon SVG didalam menu navigasi atau yang lainnya kamu harus menambahkan kode CSS berikut kedalam Template kamu

Salin Kode CSS berikut ini, kemudian letakkan didalam pengaturan CSS yaitu taruh diatas atau sebelum Kode ]]></b;skin>

.iconsvg{vertical-align:-7px}

Info: Kode CSS diatas untuk menyesuaikan Text agar Sejajar bersamaan Iconnya

Pengabungan Kode SVG

Kemudian kamu bisa melihat kode HTML dibawah ini untuk menampilkan icon SVG disertai text dan link atau Icon SVG dan Textnya saja :

Tampilakan Icon dan Text

DLimited <svg style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M21,2H3A2,2 0 0,0 1,4V20A2,2 0 0,0 3,22H21A2,2 0 0,0 23,20V4A2,2 0 0,0 21,2M11,17.5L9.5,19L5,14.5L9.5,10L11,11.5L8,14.5L11,17.5M14.5,19L13,17.5L16,14.5L13,11.5L14.5,10L19,14.5L14.5,19M21,7H3V4H21V7Z'/></svg> Desain Limited

Info: Kamu bisa ubah Text tersebut tepatnya setelah Tag </svg>

Tampilkan Icon dan Link Text

<li><a href='link_kamu' itemprop='url'><span itemprop='name'><svg style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M21,2H3A2,2 0 0,0 1,4V20A2,2 0 0,0 3,22H21A2,2 0 0,0 23,20V4A2,2 0 0,0 21,2M11,17.5L9.5,19L5,14.5L9.5,10L11,11.5L8,14.5L11,17.5M14.5,19L13,17.5L16,14.5L13,11.5L14.5,10L19,14.5L14.5,19M21,7H3V4H21V7Z'/></svg> Icon Script </span></a></li>

Ubah Kode didalam Tag dengan Link kamu, dan kamu bisa ubah Textnya Setelah Tag href=

Nah bagaimana sobat Desain sudah mengerti atau malah 🤔..... Hhmmmmm... 🤨 Membingungkan, Sepertinya dari penjelasan diatas sudah sangat detail sekali penjabaran nya

Baca Juga :
Ar-rahim 🇵🇸