Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Icon SVG dan Menyisipkannya pada blog


Icon SVG
Icon SVG

penggunaan icon pada sebuah web blog memang dibutuhkan dalam tampilan web blog mulai dari icon tombol bagikan /share button, icon menu side bar , ikon footer dll.

cara membuat ikon sangat mudah apabila menggunakan Font awesome yang merupakan salah satu font web yang menyediakan ikon yang lengkap. dibalik kelebihan nya, font awesome memiliki kekurangan yaitu Loading Font Awesome CSS Terlalu Lambat, bisa di lihat melalui tes kecepatan loading web blog di page speed insight google

apabila ingin memperhatikan kecepatan blog maka lebih baik menggunakan ikon format gambar Scalable Vector Graphics (SVG)

Sejumlah peramban web populer seperti Mozilla Firefox, Internet Explorer, Google Chrome, Opera, dan Safari sudah mulai mendukung penggunakan format SVG.

penggunaan SVG mampu mengatasi lambatnya pemuatan penggunaan icon, ini bisa dijadikan solusi sebagai pengganti dari font awesome.

walaupun tidak semudah membuat ikon dengan font awesome, akan tetapi membuat ikon svg tidaklah terlalu rumit karena beberapa situs telah menyediakan fasilitas dalam membuat ikon svg
diantaranya https://materialdesignicons.com dan. https://icomoon.io/app/#/select

Cara Mudah Membuat Ikon SVG 

Cara Membuat Ikon SVG lewat situs https://materialdesignicons.com bisa  dilihat pada tutorial igniel.com 

berikut adalah cara membuat ikon svg melalui situs icomoon.io

1. kunjungi website berikut https://icomoon.io/app/#/select
2. pilih tab selection kemudian pilih salah satu ikon yang mau dipasang, contoh ikon home

3. klik generate svg & more di bebelah kiri tab selection bawah 


4. atur ukuran dengan memasukkan angka ukuran sesuai pilihan
5. simpan kursor dibawah ikon, lalu klik get code
6. maka akan muncul tiga buah kode 1. HTML (SVG use) 2. Symbol definition 3. CSS

  • . HTML (SVG use)
kurang lebih seperti ini :


<svg class="icon icon-home3"><use xlink:href="#icon-home3"></use></svg>
  • . Symbol definition.
kurang lebih seperti ini :

<symbol id="icon-home3" viewBox="0 0 12 12"><path d="M12 7.125l-2.25-2.25v-3.375h-1.5v1.875l-2.25-2.25-6 6v0.375h1.5v3.75h3.75v-2.25h1.5v2.25h3.75v-3.75h1.5z"></path></symbol>

  • . CSS
kurang lebih seperti ini :


.icon {
  display: inline-block;
  width: 1em;  height: 1em;  stroke-width: 0;  stroke: currentColor;  fill: currentColor;}

7. copy satu persatu kode diatas, pastekan di notepad
8. copy kode Symbol definition  kemudian pastekan di tanda   HTML (SVG use)

<svg class="icon icon-home3"><use xlink:href="<symbol id="icon-home3" viewBox="0 0 12 12">
<path d="M12 7.125l-2.25-2.25v-3.375h-1.5v1.875l-2.25-2.25-6 6v0.375h1.5v3.75h3.75v-2.25h1.5v2.25h3.75v-3.75h1.5z"></path></symbol>icon-home3"></use></svg>

9. Pastekan Kode diatas (langkah 8) pada html ikon yang mau disimpan misalnya di footer, side nav dll.

10. cari kode  ]]</b:skin> , gunakan ctrl + f untuk mempermudah mencari  ]]</b:skin>
tempelkan kode CSS tersebut diatas (langkah 6) sebelum  kode ]]</b:skin>

bila kesulitan menemukan kode ]]</b:skin> . gunakan opsi lain menyimpan kode css diatas, yaitu lewat layout kemudian pilih theme designer, lalu di advanced pilih add css paste kode kemudian apply


11. save theme

demikianlah Cara Membuat Icon SVG dan Menyisipkannya pada blog, semoga bermanfaat

Posting Komentar untuk "Cara Membuat Icon SVG dan Menyisipkannya pada blog"

data-ad-format="auto">
data-ad-format="auto">

Berlangganan via Email