Implementasi Icon SVG FontAwesome Terbaru di Blogger

Artikel ini akan membahas mengenai implementasi FontAwesome pada Website dan Blogger menggunakan metode SVG Sprites.
Artikel ini akan membahas mengenai implementasi FontAwesome pada Website dan Blogger menggunakan metode SVG Sprites.

implementasi ikon svg fontawesome dengan svg sprites

Sekilas tentang SVG

Scalable Vector Graphics, atau biasanya disebut sebagai SVG, merupakan gambar vektor dengan format grafis 2 dimensi yang berbasis eXtensible Markup Language dan memiliki dukungan untuk animasi, filter, gradient, serta fitur interaktif lainnya.

SVG 1.1 Edisi ke-2 merupakan rilisan terakhir yang juga sekaligus dijadikan W3C Recommendation. Fitur-fitur dari SVG 1.1 ini sudah banyak didukung oleh browser populer, tetapi ada beberapa yang belum sepenuhnya didukung oleh semua browser; diantaranya SMIL untuk animasi dan SVG Fonts untuk menampilkan font tertentu di dalam SVG.

Contoh SVG

Dibawah ini dilampirkan contoh file SVG dari Logo TaufiqHdyt.com



Implementasi FontAwesome SVG dengan Metode Sprite

Secara umum, cara kerja Metode Sprite adalah sebagai berikut; pertama mendefinisikan Symbol suatu icon dan menaruhnya di bagian akhir dokumen HTML, lalu di bagian tertentu dari dokumen tersebut memanggil ID Symbol icon yang sebelumnya telah didefinisikan, maka semua pemanggil ID tersebut akan menyisipkan icon di dalamnya.

Tahap Implementasi

Ada dua cara implementasi; dengan membuat file SVG external, yang kedua dengan mendefinisikannya langsung di bagian akhir dokumen.
Cara yang digunakan pada tutorial ini adalah yang kedua.
  1. Siapkan file Sprite, bisa download di Repository GitHub Font Awesome, atau melalui link di bawah laman ini.
  2. Buka menggunakan teks editor kesayangan.
  3. Pilih semua Ikon yang akan digunakan, yang tidak digunakan bisa dihapus.
    Atau jika Font yang digunakan sedikit, buat file SVG baru lalu copy paste semua icon yang akan digunakan. Contoh format-nya seperti di bawah ini.
    <?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="blogger" viewBox="0 0 448 512">
      <path d="M162.4 196c4.8-4.9 6.2-5.1 36.4-5.1 27.2 0 28.1.1 32.1 2.1 5.8 2.9 8.3 7 8.3 13.6 0 5.9-2.4 10-7.6 13.4-2.8 1.8-4.5 1.9-31.1 2.1-16.4.1-29.5-.2-31.5-.8-10.3-2.9-14.1-17.7-6.6-25.3zm61.4 94.5c-53.9 0-55.8.2-60.2 4.1-3.5 3.1-5.7 9.4-5.1 13.9.7 4.7 4.8 10.1 9.2 12 2.2 1 14.1 1.7 56.3 1.2l47.9-.6 9.2-1.5c9-5.1 10.5-17.4 3.1-24.4-5.3-4.7-5-4.7-60.4-4.7zm223.4 130.1c-3.5 28.4-23 50.4-51.1 57.5-7.2 1.8-9.7 1.9-172.9 1.8-157.8 0-165.9-.1-172-1.8-8.4-2.2-15.6-5.5-22.3-10-5.6-3.8-13.9-11.8-17-16.4-3.8-5.6-8.2-15.3-10-22C.1 423 0 420.3 0 256.3 0 93.2 0 89.7 1.8 82.6 8.1 57.9 27.7 39 53 33.4c7.3-1.6 332.1-1.9 340-.3 21.2 4.3 37.9 17.1 47.6 36.4 7.7 15.3 7-1.5 7.3 180.6.2 115.8 0 164.5-.7 170.5zm-85.4-185.2c-1.1-5-4.2-9.6-7.7-11.5-1.1-.6-8-1.3-15.5-1.7-12.4-.6-13.8-.8-17.8-3.1-6.2-3.6-7.9-7.6-8-18.3 0-20.4-8.5-39.4-25.3-56.5-12-12.2-25.3-20.5-40.6-25.1-3.6-1.1-11.8-1.5-39.2-1.8-42.9-.5-52.5.4-67.1 6.2-27 10.7-46.3 33.4-53.4 62.4-1.3 5.4-1.6 14.2-1.9 64.3-.4 62.8 0 72.1 4 84.5 9.7 30.7 37.1 53.4 64.6 58.4 9.2 1.7 122.2 2.1 133.7.5 20.1-2.7 35.9-10.8 50.7-25.9 10.7-10.9 17.4-22.8 21.8-38.5 3.2-10.9 2.9-88.4 1.7-93.9z"></path>
    </symbol>
  </svg>
</svg>
    Keterangan:
    - id="blogger" adalah nama ID Icon, nama pemanggil.
    - <symbol> ... </symbol> adalah satu Icon.
  4. Setelah semua Icon terdefinisikan, sekarang masukkan seluruh definisi tersebut ke akhir Template Blogger atau Website, di atas </body>
  5. Atur Styling untuk Container Icon-nya dengan cara menambahkan kode CSS ini di-atas kode </head> atau </b:skin>.
    .icon {
  display:inline-block;
}
.icon svg {
  width:1rem;
  height:1rem;
  fill:#000000;
}
  6. Untuk memanggil, menggunakan format sebagai berikut.
    <div class="icon">
  <svg>
    <!-- Call ID -->
    <use href="#blogger";/>
  </svg>
</div>
    Keterangan:
    - Tambahkan pembungkus Icon tersebut (.icon) agar tampilan Icon-nya tidak rusak.
    - Untuk memanggil Icon tertentu, tinggal ganti kode href="#id-icon" menjadi ID Icon yang diinginkan.

  7. Sebelum template di-upload, jangan lupa untuk backup terlebih dahulu.

  8. Simpan

Dan demikian tutorial singkat tentang implementasi icon SVG Font Awesome menggunakan metode Sprite di Blogger, semoga bermanfaat.

Download Links

Referensi:
[1] https://fontawesome.com/how-to-use/on-the-web/advanced/svg-sprites

Posting Komentar