Ikon Simpel dari Karakter Tersembunyi dalam HTML

Kali ini, saya akan memberikan sebuah trik pada kalian. Trik ini saya dapatkan ketika berjalan-jalan dan nyangkut di sebuah website yaitu Developphp. Trik ini adalah tentang bagaimana menampilkan ikon-ikon yang tersimpan dalam kode-kode hex HTML. Ikon-ikon ini sebenarnya adalah karakter-karakter Unicode yang tersimpan dalam kode-kode hekssadesimal HTML. Pada postingan kali ini, saya akan menampilkan karakter-karakter unicode HTML dengan menuliskan kode-kode heksadesimal dengan metode looping/perulangan for yang ada pada Javascript. Kita akan menampilkan karakter-karakter tersebut dengan range 9728 hingga 9762 ( kalian bebas mempraktikannya; mulai dari 0 hingga 100000 pun tak apa :D loadingnya bakal lama tuh ).

Nah, langsung aja yah. Kita akan sedikit bermain html, css, dan tentunya javascript di sini.

Step by Step

1. Langkah pertama adalah, buka text editor favorit kalian.
2. Lalu, buat file CSS-nya. Kalo yang ini terserah Sobat, Sobat bisa berkreasi sendiri...

   
   <style>
     #icons > div{
          display:inline-block;
          border:1px solid #AAA;
          margin: 5px;
          padding:20px;
          text-align:center;
     }
     #icons > div > span{
          display:block;
          color:rgb(219, 67, 67);
          font-size:50px;
     }
   </style>
   

   Lalu file HTML dan Javascript-nya seperti ini:

   
   <div id="icons">
   <script type="text/javascript">
     for(var i=9728; i < 9762; i++){
         document.write("<div>");
         document.write("&amp;#"+i+";");
         document.write("<span>&#"+i+";</span>");
         document.write("</div>");
     }
     </script>
   </div>
   

3. Save/simpan file dengan nama "index" atau apapun sesuai dengan yang Kalian inginkan dengan ekstensi/format file *.html. Gunakan opsi Save As dengan tipe All Files ("."). Sehingga file kita menjadi "index.html"
4. Lalu, buka file index.html tersebut di browser.
5. Dan..., tara... Kalian akan melihat karakter ikon-ikon/simbol-simbol dan value hex kode HTML-nya seperti berikut ini.
   

Ini dia video-nya