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 berikut. Disana kamu bisa milih berbagai jenis icon SVG, yang nanti kodenya diambil untuk disimpan di blog.s
    https://materialdesignicons.com
    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 sebagai berikut:

<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.

Artikel Terkait

50 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i>
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em>
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Charlotte
    5/4/22
    Profil: https://www.blogger.com/profile/07123898444593098130
    Mbakk igniel minta kode svg adsense nya dong 😁😁
  • Xander
    11/6/21
    Profil: https://www.blogger.com/profile/04295025351285545801
    How can I add the icons on my main list like yours
  • raztarman
    21/1/21
    Profil: https://www.blogger.com/profile/04898223381243017649
    saya coba mengganti font awesome dengan svg ini yang ada pada menu navigasi utama. yang awalnya dengan kode seperti ini

    <li><a class='active' href='https://harmansh.blogspot.com/'><i class='fa fa-home'/></i></a></li>

    setelah menggantinya, menjadi seperti ini

    <li><a class='active' href='#'><svg style="width:15px;height:15px" viewBox="0 0 24 24">
    <path fill="#ffffff" d="M3 10v11h6v-7h6v7h6v-11L12,3z"/>
    </svg></i></a></li>

    hasilnya tidak rata space(margin) atas dan bawah. apakah penulisannya sudah benar?
  • hasheemi Rafsanjani
    20/1/21
    Profil: https://www.blogger.com/profile/01205852673505466263
    Mbak misalnya saya make font awesome kan gini
    content: "\f007";
    Apakah kalau saya pake svg
    content: "data:image/svg+xml,iconsvgnya";
    Atau langsung svg nya yang sudah disetting
  • علي كمبيوتر
    25/7/20
    Profil: https://www.blogger.com/profile/16158558893347429492
    I want help with adding icons to my site, but I didn't understand, can you help me?
  • Jurnalis
    14/6/20
    Profil: https://www.blogger.com/profile/10668643000251508781
    Salahnya dimana? Gak tampil icon.
    .verified-user:after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' width='16px' height='16px' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z' fill='%231C82F3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right; background-size: 16px 16px;
    content:'';
    }
  • Ubay Dilah
    2/5/20
    Profil: https://www.blogger.com/profile/07990874229028133255
    update min link terbarunya untuk icon, karena sekarang berbayar :(
  • Mas Kolektor
    27/4/20
    Profil: https://www.blogger.com/profile/00404115259560220770
    sip, sering2 dah mampir kesini :D
  • ดี ต่อ ใจ
    8/3/20
    Profil: https://www.blogger.com/profile/11563704812690245981
    Sering mampir mampir di blog ini, diem2 belajar hihihi mantap dah.. gak sia2 ksini, loading nya ngebut nyaris 100% mantul dah.. hihihi 😘😘😘
  • Anonim
    Anonim 11/11/19
    mba kok website nya gak bisa dikunungi lagi ya
    • Igniel
      11/11/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Website apa?
  • Himang
    9/11/19
    Profil: https://www.blogger.com/profile/14055843297418810998
    wah karena ini saya sudah selesai membuat Cara Membuat Menu Navigasi Blog Keren Ala Igniplex. thanks mbak wkwkwk
  • sofyan Ya-an
    13/10/19
    Profil: https://www.blogger.com/profile/00896429756820287073
    Pokoknya saya puas dengan tutorial mbak Igniel...semuanya bekerja dengan baik dan benar dan mem"booster" halaman halaman sy hingga 15% lebih cepat.

    Big hug for you!
  • Admin
    16/9/19
    Profil: https://www.blogger.com/profile/16375346131206494858
    tanya mba, kenapa saya pasang ikon fb twitter tidak pas di tengah ya posisinya, posisinya itu malah naik dari background bulat, jadi tidak di tengah. saya pake cara no 1, langsung saya paste di html. terima kasih
  • Jadi Tutor
    13/9/19
    Profil: https://www.blogger.com/profile/15360385295750158030
    ternyata berguna sekali mbak, load font awesome yg tadi memakan waktu 20 ms sekarang dah ilang, trims sangat bermanfaat.
  • Dito
    21/8/19
    Profil: https://www.blogger.com/profile/12711382757777534231
    Untuk yang cara 4.3 itu ngambil linknya gimana ya?
    • Igniel
      21/8/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Itu kode HTML ikon SVG yang penulisannya diubah sedikit.
    • Dito
      23/8/19
      Profil: https://www.blogger.com/profile/12711382757777534231
      Ok, thanks.. akhirnya berhasil makai icon SVG.
  • Tedi Eka
    1/6/19
    Profil: https://www.blogger.com/profile/17195151981500818409
    var perPage=8;
    var numPages=5;
    var firstText ='';
    var lastText ='Last';
    var prevText ='';
    var nextText ='';
    var urlactivepage=location.href;
    var home_page="/";
  • Tedi Eka
    1/6/19
    Profil: https://www.blogger.com/profile/17195151981500818409
    Mbak kalau kode font awesomenya di dalam js seperti ini gimana cara ganti nya? Sudah saya coba pake background kemudian saya pnggil class-nya tidak tampil.


    /**/
  • Eirudo
    27/5/19
    Profil: https://www.blogger.com/profile/14009731569369244433
    Nice Rain... Entah aku siap ato enggak ini replace semua fontawesome ke SVG-nya
  • Syafiq
    23/2/19
    Profil: https://www.blogger.com/profile/04007798583952663891
    Kalau di menu bar gimana ya hehe.. Yang " <*/li>". Saya penasaran, apa bisa dipasang SVG
  • sirgalung
    12/12/18
    Profil: https://www.blogger.com/profile/17852978727634480111
    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??
    • Igniel
      13/12/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      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.
  • Essa
    3/12/18
    Profil: https://www.blogger.com/profile/03385518739444780345
    Mba mau nanya, kalau misal ikon SVG nya mau dikasi link gimana mba caranya? maap masih belajar mba hehe
  • Rafi
    23/11/18
    Profil: https://www.blogger.com/profile/16661548576424459683
    kak, cara bikin template blogger bagaimana ya selain bootstrap?
  • Rohim Nurarifin
    31/10/18
    Profil: https://www.blogger.com/profile/17707752688993059273
    kalau gambar sendiri dijadikan ke path fill svg gimana caranya mbak?
  • John
    8/9/18
    Profil: https://www.blogger.com/profile/15114308534748992986
    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).
    • Igniel
      8/9/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Coba pake vertical-align.

      Contoh:
      vertical-align: -5px;
  • Miras Tampan
    19/6/18
    Profil: https://www.blogger.com/profile/08581789198504722360
    boleh dong bagi ilmu bagaimana cara ganti komentar blogger, kayak komentar blog ini!
    • Igniel
      8/11/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      https://www.igniel.com/2018/09/komentar-baru-blogger.html
  • mbok dolan
    21/2/18
    Profil: https://www.blogger.com/profile/00533933211881717688
    mbak igniel, kalau sudah ada fontawsome gimana cara hapusnya dan ganti icon svg ini?
    • Igniel
      21/2/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      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.
    • Gunawan
      2/5/19
      Profil: https://www.blogger.com/profile/03249225231876715838
      ciri2 font awesome yang diwidget scriptnya apa, mbak? bagian artikel terbaru sama label pake font awesome punya saya.
  • Ardianysah J. Prawira
    22/11/17
    Profil: https://www.blogger.com/profile/17188659355465337070
    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
    • Igniel
      22/12/17
      Profil: https://www.blogger.com/profile/09199170379661896200
      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
  • admin
    22/10/17
    Profil: https://www.blogger.com/profile/10340454558480684901
    ukuran sama warnanya harus diatur secara manual jdi gk bisa automatis ? penggunaan iconnya udh termasuk responsive blm min ?
    • Igniel
      22/10/17
      Profil: https://www.blogger.com/profile/09199170379661896200
      Iya manual, diatur width dan height nya. Sama kaya Font Awesome yang font size nya juga mesti diatur dulu.

      Udah responsif.
  • Ahmad Jazuli
    9/10/17
    Profil: https://www.blogger.com/profile/07502612302014729514
    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 ? :)
    • Igniel
      9/10/17
      Profil: https://www.blogger.com/profile/09199170379661896200
      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:'';}
    • Asep Sukmawan
      8/11/18
      Profil: https://www.blogger.com/profile/07117734446116423152
      Pusinggggg
    • Giri Diwa Adam
      22/2/19
      Profil: https://www.blogger.com/profile/11346759223421693465
      saya tetep nggak muncul mbak walau sudah mengikuti langkah yang di contohkan mbak.
  • ipung berjuang
    16/9/17
    Profil: https://www.blogger.com/profile/14443122507575303553
    Contohnya kayak apa seh ini?
    • Igniel
      16/9/17
      Profil: https://www.blogger.com/profile/09199170379661896200
      Yaampun...di artikel kan ada contoh web penyedia icon SVG. Contohnya diliat di webnya aja.
  • Masran Jamsari Redha
    14/9/17
    Profil: https://www.blogger.com/profile/12217686819778425001
    Terima kasih Ms. Igniel. Sangat berguna maklumat & tutorial ini. Akan saya cobain nanti.
  • handsomeware
    13/9/17
    Profil: https://www.blogger.com/profile/11370500400133551764
    Thanks informasinya gan
    Buat menambah pengalaman
  • Ozik Jarwo
    13/9/17
    Profil: https://www.blogger.com/profile/17745819766519032109
    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
    • Igniel
      13/9/17
      Profil: https://www.blogger.com/profile/09199170379661896200
      Saya juga baru tau 4-6 bulan kebelakang mas. Coba kita tau lebih awal ya. Pasti sekarang udah enak, nggak sibuk ganti sana-sini.
    • Situsnesia.com
      27/7/19
      Profil: https://www.blogger.com/profile/02172973215624888434
      persis seperti apa yang saya alami :D
    • Hiruko Kagetane
      4/2/20
      Profil: https://www.blogger.com/profile/10405552913753305006
      Untung saya mampir dulu ke blog mba igniel hehehe jadi gak ngalamin soalbikin sendiri icon SVG wkwkwk makasih mba sudah share ilmunya