
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
- 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
- Pilih salah satu, lalu klik icon
</>
, pilih "View SVG". Kemudian kode untuk menampilkan iconnya akan muncul.
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.
- width:24px;height:24px: Lebar dan tinggi icon.
- #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}
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;
}
- Simbol
<
diganti menjadi%3C
- Simbol
>
diganti menjadi%3E
- 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.
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...
BalasHapusTerima kasih banyak salam Bang Jarwo
Saya juga baru tau 4-6 bulan kebelakang mas. Coba kita tau lebih awal ya. Pasti sekarang udah enak, nggak sibuk ganti sana-sini.
Hapuspersis seperti apa yang saya alami :D
HapusUntung saya mampir dulu ke blog mba igniel hehehe jadi gak ngalamin soalbikin sendiri icon SVG wkwkwk makasih mba sudah share ilmunya
HapusThanks informasinya gan
BalasHapusBuat menambah pengalaman
Terima kasih Ms. Igniel. Sangat berguna maklumat & tutorial ini. Akan saya cobain nanti.
BalasHapusContohnya kayak apa seh ini?
BalasHapusYaampun...di artikel kan ada contoh web penyedia icon SVG. Contohnya diliat di webnya aja.
Hapuska, saya punya masalah ketika menggunakan internal CSS pseudo-element before dan after,
BalasHapusBerikut 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 ? :)
Kalau di dalam pseudo-element :before :after harus pake 'content'
HapusJadi 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:'';}
Pusinggggg
Hapussaya tetep nggak muncul mbak walau sudah mengikuti langkah yang di contohkan mbak.
Hapusukuran sama warnanya harus diatur secara manual jdi gk bisa automatis ? penggunaan iconnya udh termasuk responsive blm min ?
BalasHapusIya manual, diatur width dan height nya. Sama kaya Font Awesome yang font size nya juga mesti diatur dulu.
HapusUdah responsif.
Hampir semua type script yang dipanggil dari luar host (external) biasanya emang bikin loading blog makin gembrot sih yah teh ?
BalasHapusbukan cuma Font Awesome, CSS dan JS dari Bootstrap juga bikin Loading Gembrot yah teh ?
Ijin Bookmark dulu teh.. buat PR nih.. hehe
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
Hapusmbak igniel, kalau sudah ada fontawsome gimana cara hapusnya dan ganti icon svg ini?
BalasHapus1) Hapus dulu link pemanggil library Fontawesome. Biasanya belakangnya "font-awesome.min.css"
Hapus2) 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.
ciri2 font awesome yang diwidget scriptnya apa, mbak? bagian artikel terbaru sama label pake font awesome punya saya.
Hapusboleh dong bagi ilmu bagaimana cara ganti komentar blogger, kayak komentar blog ini!
BalasHapushttps://www.igniel.com/2018/09/komentar-baru-blogger.html
HapusGimana 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).
BalasHapusCoba pake vertical-align.
HapusContoh:
vertical-align: -5px;
kalau gambar sendiri dijadikan ke path fill svg gimana caranya mbak?
BalasHapuskak, cara bikin template blogger bagaimana ya selain bootstrap?
BalasHapusMba mau nanya, kalau misal ikon SVG nya mau dikasi link gimana mba caranya? maap masih belajar mba hehe
BalasHapusNanya mba. yang ini ya
BalasHapus/* 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??
Yang dihapus cuma font awesome-nya aja. Bukan semua.
HapusMisalnya 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.
Kalau di menu bar gimana ya hehe.. Yang " <*/li>". Saya penasaran, apa bisa dipasang SVG
BalasHapusNice Rain... Entah aku siap ato enggak ini replace semua fontawesome ke SVG-nya
BalasHapusMbak 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.
BalasHapus/**/
BalasHapusvar perPage=8;
var numPages=5;
var firstText ='';
var lastText ='Last';
var prevText ='';
var nextText ='';
var urlactivepage=location.href;
var home_page="/";
Untuk yang cara 4.3 itu ngambil linknya gimana ya?
BalasHapusItu kode HTML ikon SVG yang penulisannya diubah sedikit.
HapusOk, thanks.. akhirnya berhasil makai icon SVG.
Hapusternyata berguna sekali mbak, load font awesome yg tadi memakan waktu 20 ms sekarang dah ilang, trims sangat bermanfaat.
BalasHapustanya 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
BalasHapusPokoknya saya puas dengan tutorial mbak Igniel...semuanya bekerja dengan baik dan benar dan mem"booster" halaman halaman sy hingga 15% lebih cepat.
BalasHapusBig hug for you!
wah karena ini saya sudah selesai membuat Cara Membuat Menu Navigasi Blog Keren Ala Igniplex. thanks mbak wkwkwk
BalasHapusmba kok website nya gak bisa dikunungi lagi ya
BalasHapusWebsite apa?
HapusSering mampir mampir di blog ini, diem2 belajar hihihi mantap dah.. gak sia2 ksini, loading nya ngebut nyaris 100% mantul dah.. hihihi 😘😘😘
BalasHapussip, sering2 dah mampir kesini :D
BalasHapusupdate min link terbarunya untuk icon, karena sekarang berbayar :(
BalasHapusSalahnya dimana? Gak tampil icon.
BalasHapus.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:'';
}
I want help with adding icons to my site, but I didn't understand, can you help me?
BalasHapus