Cara Menambahkan Icon di Tema Blogger Jettheme

Menambahkan Icon di tema blogger Jettheme tidak terlalu sulit seperti yang dibayangkan. Anda bisa menambahkan icon lain format .SVG. Seperti diketahui bahwa tema blogger Jettheme mempunyai 24 icon yang bisa digunakan bawaan dari templatenya.

Berikut 24 icon bawaan bisa dipasang di tema jettheme

1. Whatsapp

   <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-whatsapp"/></svg>

2. Pinterest

   <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-pinterest"/></svg>

3. Tumblr

   <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-tumblr"/></svg>

4. Twitter

   <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-twitter"/></svg>

5. Linkedin

   <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-linkedin"/></svg>

6. Facebook

   <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-facebook"/></svg>

7. Instagram

   <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-instagram"/></svg>

8. Youtube

   <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-youtube"/></svg>

9. Telegram

   <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-telegram"/></svg>

10. Github

    <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-github"/></svg>

11. Arrow Button

    <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-arrow-b"/></svg>

12. Arrow Left

    <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-arrow-l"/></svg>

13. Arrow Right

    <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-arrow-r"/></svg>

14. Arrow Top

    <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-arrow-t"/></svg>

15. User

    <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-user"/></svg>

16. Clock

    <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-clock"/></svg>

17. Comment

    <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-comment"/></svg>

18. Menu

    <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-menu"/></svg>

19. Mail

    <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-mail"/></svg>

20. Pencil

    <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-edit"/></svg>

21. Close

    <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-close"/></svg>

22. Search

    <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-search"/></svg>

23. Check

    <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-check"/></svg>

24. Download

    <svg aria-hidden="true" class="jt-icon"><use xlink:href="#i-download"/></svg>

Untuk menambahkan icon yang tidak ada dalam tema bawaan jettheme, pertama-tama adalah mencari icon berformat .SVG. contohnya icon lokasi kemudian temukan kode lokasi svg dan tambahkan di tema template sebelum kode.

  (code anda disini...)
  <symbol-id="" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"></symbol-id="">]]></b:widget-setting>
  

Sebagai referensi icon format svg bisa mengunjungi ionicons premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG. Completely open source, MIT licensed and built by Ionic.

Nanti hasilnya seperti ini

<symbol id="location" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path d="M256 48c-79.5 0-144 61.39-144 137 0 87 96 224.87 131.25 272.49a15.77 15.77 0 0025.5 0C304 409.89 400 272.07 400 185c0-75.61-64.5-137-144-137z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><circle cx="256" cy="192" r="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></circle></path></symbol>
<symbol-id="" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"></symbol-id="">]]></b:widget-setting>

Untuk icon lainnya Anda bisa melakukannya seperti tutorial di atas. Setelah tema disimpan icon lokasi bisa digunakan untuk keperluan posting dan lainnya.

Contoh:

Contact
Kompleks Pinus Regency Kota Bandung
0813 1030 8903
Воздух_Сумерки@yandex.ru

<p><b>Contact</b> <br />
<svg aria-hidden="true" class="jt-icon"><use xlink:href="#location"/></svg> Kompleks Pinus Regency Kota Bandung<br/>
<svg aria-hidden="true" class="jt-icon"><use xlink:href="#phone"/></svg> 0813 1030 8903<br />
<svg aria-hidden="true" class="jt-icon"><use xlink:href="#email"/></svg> Воздух_Сумерки@yandex.ru<br />
  

Demikian cara menambahkan Icon di tema Jettheme, semoga bermanfaat.