Mempercepat Blog #1 - Icon SVG Sebagai Pengganti Font Awesome

Cara Pasang Ikon SVG yang Mudah dan Ringan

Penggunaan Font Awesome pada blog udah jadi hal yang lumrah. Apa sih Font Awesome? Dia adalah font khusus yang berfungsi sebagai icon. Jadi kamu udah nggak perlu tuh pake gambar berekstensi .jpg / .png / .gif kalau mau pasang icon di blog. Cukup sisipkan Font Awesome didalamnya. Tapi, udah pasti ada plus minusnya dong dari penggunaan Font Awesome ini.

1. Kelebihan dan Kekurangan Font Awesome

Plus
Memperingan pekerjaan. Nggak perlu membuat icon satu-persatu dengan gambar. Jenis iconnya pun banyak. Jangan khawatir icon yang diperlukan nggak ada, soalnya banyak banget. Penggunaan icon bisa mempercantik layout blog lho.

Minus
Memperlambat loading blog. Loh kenapa? Karena untuk pake Font Awesome ini harus manggil script dulu. Pemanggilan script eksternal jadi salah satu point penting yang perlu dipertimbangkan. Terutama bagi pengguna platform Blogger yang nggak bisa ngatur cache dan expired header. Meskipun nggak memperlambat blog sebegitu drastis, tetep aja bakal nurunin score ketika ngecek page speed di GTMetrix, Google Page Speed Insight, dll kalau kamu nggak pinter-pinter ngakalin. Umumnya Font Awesome dipanggil dengan menuliskan script ini di HTML blog.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

2. Icon SVG Ringan Sebagai Solusi Pengganti Font Awesome

Apa kamu tau, yang bisa menampilkan icon nggak cuma Font Awesome? Ya, ada! Mungkin kamu udah familiar sama Font Material yang sekarang mulai booming. Tapi itupun sama, harus manggil script eksternal lebih dulu.

Sebenernya ada satu jenis icon yang nggak perlu manggil script eksternal. Dia cuma perlu ditulis layaknya kode CSS / HTML biasa. Namanya adalah icon SVG atau Scalable Vector Graphics. Dia merupakan bahasa markup yang sanggup menampilkan icon atau gambar dan udah support di semua browser, baik itu desktop maupun mobile. Blog Igniel pun pake icon SVG.

3. Cara Mendapatkan Icon SVG

  1. Pertama, kamu wajib kunjungi website Material Design Icon. Disana kamu bisa milih berbagai jenis icon SVG, yang nanti kodenya diambil untuk disimpan di blog.
    Menggunakan SVG Sebagai Icon Blog

  2. Pilih salah satu, lalu klik icon </>, pilih "View SVG". Kemudian kode untuk menampilkan iconnya akan muncul.
    Icon SVG Solusi Pengganti Font Awesome


4. Cara Pasang Icon SVG di Blog

Setelah kodenya didapatkan, trus gimana cara pakai icon SVG di blog ini? SVG bisa dipasang menggunakan 3 cara. Kamu pilih deh cara mana yang paling cocok.

4.1. Langsung Pasang Seperti HTML

Ini cara yang paling gampang karena tinggal paste kode dari websitenya ke blog. Pastikan kamu udah dapet kode icon SVG (caranya yang barusan diatas). Misalnya, kodenya adalah sbb:
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#000000" d="M16,13C15.71,13 15.38,13 15.03,13.05C16.19,13.89 17,15 17,16.5V19H23V16.5C23,14.17 18.33,13 16,13M8,13C5.67,13 1,14.17 1,16.5V19H15V16.5C15,14.17 10.33,13 8,13M8,11A3,3 0 0,0 11,8A3,3 0 0,0 8,5A3,3 0 0,0 5,8A3,3 0 0,0 8,11M16,11A3,3 0 0,0 19,8A3,3 0 0,0 16,5A3,3 0 0,0 13,8A3,3 0 0,0 16,11Z" />
</svg>
Tinggal simpan deh kode itu dimanapun kamu mau. Jangan lupa ganti tulisan yang di-highlight dan sesuaikan dengan keinginan.
  1. width:24px;height:24px: Lebar dan tinggi icon.
  2. #000000: Warna icon.


4.2. Pasang HTML dan Internal CSS

Ini cara yang lebih baik dari dibanding yang pertama karena ada pengaturan internal CSSnya. Hapus kode style="width:24px;height:24px" dan fill="#000000", lalu tambahkan di kode CSS.

HTML
<svg viewBox="0 0 24 24">
    <path d="M16,13C15.71,13 15.38,13 15.03,13.05C16.19,13.89 17,15 17,16.5V19H23V16.5C23,14.17 18.33,13 16,13M8,13C5.67,13 1,14.17 1,16.5V19H15V16.5C15,14.17 10.33,13 8,13M8,11A3,3 0 0,0 11,8A3,3 0 0,0 8,5A3,3 0 0,0 5,8A3,3 0 0,0 8,11M16,11A3,3 0 0,0 19,8A3,3 0 0,0 16,5A3,3 0 0,0 13,8A3,3 0 0,0 16,11Z" />
</svg>

CSS
svg {width:24px; height:24px}
svg path {fill:#000000}

PENTING: Harap pehatikan tempat menyimpan kodenya. Jika masih di dalam ruang lingkup turunan elemen lain, maka tambahkan kode CSSnya. Misalnya disimpan di dalam ruang lingkup div yang memiliki id profil seperti ini:
<div id="profil"><svg blablabla></svg></div>

Maka CSSnya harus seperti ini:
#profil svg {width:24px; height:24px}
#profil svg path {fill:#000000}


4.3. Sebagai Internal CSS

Ini kalau kamu mau langsung pake SVG di CSS. Misalnya sebagai background image atau sebagai konten dari pseudo-element :before atau :after. Ini cara favorit saya meskipun sedikit agak ribet.
#profil {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E");
background-color:#008c5f;
background-repeat: no-repeat;
background-position: center center;
background-size: 45px 45px;
}

PENTING: tulis kode SVG persis di tempat yang udah di-hightlight. Dengan catatan:
  1. Simbol < diganti menjadi %3C
  2. Simbol > diganti menjadi %3E
  3. Simbol # diganti menjadi %23

Ini wajib agar pengaturan internal CSS bisa diterima dan akan tampil di semua browser. Kalau nggak diganti, biasanya nggak bakal muncul di Mozilla Firefox dan Internet Explorer.

Memang keliatan agak ribet dibanding Font Awesome yang memanggil kode lebih sedikit. Tapi dijamin ampuh buat mempercepat page speed. Saya pun sampe ketagihan pakai icon SVG di blog ini.
Baca Juga

DONASI VIA PAYPAL

Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.igniel.com. Terima kasih.

Artikel Terkait

24 Komentar

  1. Jujur aja mba, selama ini saya membuat ikon SVG sendiri, pusing sampe keputer-puter padahal cuma mau buat ikon tas belanja (berhenti pas ngebuat kancingnya)... Nah sekarang saya baru tau, ternyata ada website khusus yang didalamnya sudah lengkap isinya ikon SVG semua... Kenapa gak daridulu mba dikasih tau hehehe...

    Terima kasih banyak salam Bang Jarwo

    ReplyDelete
    Replies
    1. Saya juga baru tau 4-6 bulan kebelakang mas. Coba kita tau lebih awal ya. Pasti sekarang udah enak, nggak sibuk ganti sana-sini.

      Delete
  2. Thanks informasinya gan
    Buat menambah pengalaman

    ReplyDelete
  3. Terima kasih Ms. Igniel. Sangat berguna maklumat & tutorial ini. Akan saya cobain nanti.

    ReplyDelete
  4. Replies
    1. Yaampun...di artikel kan ada contoh web penyedia icon SVG. Contohnya diliat di webnya aja.

      Delete
  5. ka, saya punya masalah ketika menggunakan internal CSS pseudo-element before dan after,
    Berikut CSS awalnya :
    post-body blockquote:after,.post-body blockquote:before{color:#bbb;position:absolute;display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:400;line-height:1;font-size:20px;-webkit-font-smoothing:antialiased}.post-body blockquote:before{top:15px;left:20px;content:"\f10d"}

    Setelah saya ubah :
    .post-body blockquote:before{top:15px;left:20px;background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,7L8,11H11V17H5V11L7,7H10M18,7L16,11H19V17H13V11L15,7H18Z' fill='%23fff'/%3E%3C/svg%3E");}

    Saat saya save, icon SVGnya tidak muncul.. gimana ya ngatasin nya ? :)

    ReplyDelete
    Replies
    1. Kalau di dalam pseudo-element :before :after harus pake 'content'

      Jadi kodenya:
      .post-body blockquote:before{top:15px;left:20px;background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,7L8,11H11V17H5V11L7,7H10M18,7L16,11H19V17H13V11L15,7H18Z' fill='%23fff'/%3E%3C/svg%3E");
      content:'';}

      Delete
  6. ukuran sama warnanya harus diatur secara manual jdi gk bisa automatis ? penggunaan iconnya udh termasuk responsive blm min ?

    ReplyDelete
    Replies
    1. Iya manual, diatur width dan height nya. Sama kaya Font Awesome yang font size nya juga mesti diatur dulu.

      Udah responsif.

      Delete
  7. Hampir semua type script yang dipanggil dari luar host (external) biasanya emang bikin loading blog makin gembrot sih yah teh ?

    bukan cuma Font Awesome, CSS dan JS dari Bootstrap juga bikin Loading Gembrot yah teh ?

    Ijin Bookmark dulu teh.. buat PR nih.. hehe

    ReplyDelete
    Replies
    1. Betul kang, Bootstrap juga. Dan kayanya agak mubazir kalo pake Bootstrap. Yang kepake paling cuma sedikit dari keseluruhan library-nya. Mending pake CSS dan JS sendiri, trus simpen langsung di HTML blognya. Jangan disimpen diluar :D

      Delete
  8. mbak igniel, kalau sudah ada fontawsome gimana cara hapusnya dan ganti icon svg ini?

    ReplyDelete
    Replies
    1. 1) Hapus dulu link pemanggil library Fontawesome. Biasanya belakangnya "font-awesome.min.css"

      2) Hapus semua element HTML bekas Fontawesome. Nama classnya mengandung "fa". Contoh: <i class="fa fa-coffee"/>

      3) Tinggal ganti ke icon SVG sesuai cara diatas.

      Delete
  9. boleh dong bagi ilmu bagaimana cara ganti komentar blogger, kayak komentar blog ini!

    ReplyDelete
    Replies
    1. https://www.igniel.com/2018/09/komentar-baru-blogger.html

      Delete
  10. Gimana cara mengatur posisi icon nya? Saya gunakan position atau margin tetap gak berubah, kalau posisi icon nya gak diubah kadang gak sejajar dengan icon lainnya (agak ke atas).

    ReplyDelete
    Replies
    1. Coba pake vertical-align.

      Contoh:
      vertical-align: -5px;

      Delete
  11. kalau gambar sendiri dijadikan ke path fill svg gimana caranya mbak?

    ReplyDelete
  12. kak, cara bikin template blogger bagaimana ya selain bootstrap?

    ReplyDelete
  13. Mba mau nanya, kalau misal ikon SVG nya mau dikasi link gimana mba caranya? maap masih belajar mba hehe

    ReplyDelete
  14. Nanya mba. yang ini ya


    /* Comment */
    #comments h3{font-size:20px;padding:10px;background:#8FBC8B;margin:0;color:#fff}
    .comments .comment-header{position:relative}
    #comments .avatar-image-container img{border:0}
    .comment-thread{color:#111}
    .comment-thread a{color:#777}
    .comment-thread ol li{margin:0 0 10px}
    .comment-thread .comment-content a,.comments ol{list-style:none;padding-left:0}
    .comments .user a{color:#999;font-weight:400}
    .comments .datetime a{color:#999;font-weight:400;font-size:13px}
    .comments .avatar-image-container,.comments .avatar-image-container img{position:absolute;float:left;width:48px;max-width:48px;height:48px;max-height:48px}
    .comments .comment .comment-actions a{color:#999;margin-right:5px;font-size:13px}
    .comments .comment .comment-actions a:hover{color:#666;text-decoration:none}
    .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:0}
    .comments .comment-block{background:#fff;padding:10px;border:1px solid rgba(0,0,0,0.08)}
    .comments .comments-content .comment:first-child{padding-top:0}
    .comments .comments-content .comment{margin:10px 0 0;padding:0;width:100%;line-height:1em}
    .comments .comments-content .icon.blog-author{position:absolute;top:0;right:-5px}
    .comments .comments-content .icon.blog-author:before{content:"\f058";font-family:FontAwesome;display:inline-block;font-size:18px;font-weight:400;color:#8FBC8B}
    .comments .comments-content .comment-replies{margin-top:5px}
    .comments .comments-content .comment-thread:empty{display:none}
    .comments .comments-content .deleted-comment{font-style:italic;color:#999}
    .comments .comment-content{padding:5px 0;line-height:1.4em}
    .comments .comment-thread.inline-thread{padding:0;margin:0}
    .comments .comment-thread.inline-thread .comment-block{margin:0 0 0 48px}
    .comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:35px;max-width:35px;height:35px;max-height:35px}
    .comments .continue{border-top:0;width:100%}
    .comments .continue a{font-weight:normal;font-size:13px;margin:10px auto;color:#fff;text-align:center;background:#8FBC8B;display:block}
    .comments .continue a:hover{background:#2f3542}
    #comment-editor{height:230px!important}
    .comment-form{clear:both;width:100%;max-width:100%}
    .comments .comments-content .loadmore.loaded{display:none}
    .ZIDANE-link-btncomment{background:#8FBC8B;display:inline-block;margin:20px 0;line-height:1.6;display:inline-block;padding:8px 12px;color:#fff}
    .thread-count{font-size:13px}


    Apakah di hapus juga??
    yang kedua ikut cmt semua di hapus??

    ReplyDelete
    Replies
    1. Yang dihapus cuma font awesome-nya aja. Bukan semua.
      Misalnya dari script di atas, hapusnya bagian ini:
      .comments .comments-content .icon.blog-author:before{content:"\f058";font-family:FontAwesome;display:inline-block;font-size:18px;font-weight:400;color:#8FBC8B}

      Lihat `content` dan `font-family`. Itu yang diganti.

      Delete

Gunakan tag HTML <em> untuk menuliskan URL, potongan kode, atau hal penting lainnya.
Contoh: <em>isi pesan</em>