Ikon Unicode Karakter Decimal Dan Hex Dalam HTML

Ikon Unicode Karakter Decimal Dan Hex Dalam HTML - Penggunaan Karakter Unicode Decimal dan Hex dalam HTML untuk dijadikan sebuah simbol yang menggambarkan sebuah icon sebagai pengganti sebuah file gambar akan mempersingkat ukuran file html dan tentunya akan membuat sebuah desain akan menjadi lebih cepat dalam segi loading suatu halaman, karena bila kita menggunakan sebuah file icon berupa gambar akan me-load dimana file gambar tersebut berada.

Unicode ini bisa disematkan dalam sebuah CSS ataupun langsung dalam HTML, dan list yang ada dibawah ini merupakan sebagian kecil dari sebuah unicode yang disajikan, untuk lebih lengkapnya bisa langsung menuju http://www.alanwood.net/.

Untuk kelengkapan karakter icon bisa menggunakan Font Awesome, Font Awesome memberikan membeikan jenis-jenis icon karakter yang lebih baik dan lebih banyak, sayangnya Font Awesome harus menggunakan Font Face untuk menampilkan icon-icon karakter tersebut, walaupun begitu penggunaan Font Awesome akan lebih baik dari segi loading darip-ada menggunakan icon gambar.

✾✾✾

List Unicode karakter dalam Decimal Dan Hex

Character	Decimal	Hex	Name
♀	♀	U+2640	female sign
♂	♂	U+2642	male sign
✏	✏	U+270F	Pencil
✂	✂	U+2702	Black scissors
✁	✁	U+2701	Upper blade scissors
☎	☎	U+260E	Black telephone
✆	✆	U+2706	Telephone location sign
✉	✉	U+2709	Envelope
⌛	⌛	U+231B	Hourglass
⌨	⌨	U+2328	Keyboard
✇	✇	U+2707	Tape drive
✍	✍	U+270D	Writing hand
✌	✌	U+270C	Victory hand
☜	☜	U+261C	White left pointing index
☞	☞	U+261E	White right pointing index
☝	☝	U+261D	White up pointing index
☟	☟	U+261F	White down pointing index
☺	☺	U+263A	White smiling face
☹	☹	U+2639	White frowning face
☠	☠	U+2620	Skull and crossbones
✈	✈	U+2708	Airplane
☼	☼	U+263C	White sun with rays
❄	❄	U+2744	Snowflake
✠	✠	U+2720	Maltese cross
☪	☪	U+262A	Star and crescent
☯	☯	U+262F	Yin Yang
ॐ	ॐ	U+0950	Devanagari Om
☸	☸	U+2638	Wheel of Dharma
♈	♈	U+2648	Aries
♉	♉	U+2649	Taurus
♊	♊	U+264A	Gemini
♋	♋	U+264B	Cancer
♌	♌	U+264C	Leo
♍	♍	U+264D	Virgo
♎	♎	U+264E	Libra
♏	♏	U+264F	Scorpio
♐	♐	U+2650	Sagittarius
♑	♑	U+2651	Capricorn
♒	♒	U+2652	Aquarius
♓	♓	U+2653	Pisces
❑	❑	U+2751	Lower right shadowed white square
❒	❒	U+2752	Upper right shadowed white square
◆	◆	U+25C6	Black diamond
❖	❖	U+2756	Black diamond minus white X
⌧	⌧	U+2327	X in a rectangle box
⍓	⍓	U+2353	APL functional symbol quad up caret
⌘	⌘	U+2318	Place of interest sign
❀	❀	U+2740	White florette
✿	✿	U+273F	Black florette
❝	❝	U+275D	Heavy double turned comma quotation mark ornament
❞	❞	U+275E	Heavy double comma quotation mark ornament
⓪	⓪	U+24EA	Circled digit zero
①	①	U+2460	Circled digit one
②	②	U+2461	Circled digit two
③	③	U+2462	Circled digit three
④	④	U+2463	Circled digit four
⑤	⑤	U+2464	Circled digit five
⑥	⑥	U+2465	Circled digit six
⑦	⑦	U+2466	Circled digit seven
⑧	⑧	U+2467	Circled digit eight
⑨	⑨	U+2468	Circled digit nine
⑩	⑩	U+2469	Circled number ten
❶	❶	U+2776	Dingbat negative circled digit one
❷	❷	U+2777	Dingbat negative circled digit two
❸	❸	U+2778	Dingbat negative circled digit three
❹	❹	U+2779	Dingbat negative circled digit four
❺	❺	U+277A	Dingbat negative circled digit five
❻	❻	U+277B	Dingbat negative circled digit six
❼	❼	U+277C	Dingbat negative circled digit seven
❽	❽	U+277D	Dingbat negative circled digit eight
❾	❾	U+277E	Dingbat negative circled digit nine
❿	❿	U+277F	Dingbat negative circled number ten
◉	◉	U+25C9	Fisheye
◎	◎	U+25CE	Bullseye
✦	✦	U+2726	Black four pointed star
★	★	U+2605	Black star
✶	✶	U+2736	Six pointed black star
✴	✴	U+2734	Eight pointed black star
✹	✹	U+2739	Twelve pointed black star
✵	✵	U+2735	Eight pointed pinwheel star
⌖	⌖	U+2316	Position indicator
⌑	⌑	U+2311	Square lozenge
✪	✪	U+272A	Circled white star
✰	✰	U+2730	Shadowed white star
⌫	⌫	U+232B	Erase to the left
⌦	⌦	U+2326	Erase to the right
➢	➢	U+27A2	Three-D top-lighted rightwards arrowhead
➲	➲	U+27B2	Circled heavy white rightwards arrow
⇦	⇦	U+21E6	Leftwards white arrow
⇨	⇨	U+21E8	Rightwards white arrow
⇧	⇧	U+21E7	Upwards white arrow
⇩	⇩	U+21E9	Downwards white arrow
✗	✗	U+2717	Ballot X
✓	✓	U+2713	Check mark
☒	☒	U+2612	Ballot box with X (font-weight:bold)
☑	☑	U+2611	Ballot box with check (font-weight:bold)
✄	✄	U+2704	White scissors
☏	☏	U+260F	White telephone
☚	☚	U+261A	Black left pointing index
☛	☛	U+261B	Black right pointing index
⌔	⌔	U+2314	Sector
☽	☽	U+263D	First quarter moon
☾	☾	U+263E	Last quarter moon
◆	◆	U+25C6	Black diamond
◇	◇	U+25C7	White diamond
◈	◈	U+25C8	White diamond containing black small diamond
✚	✚	U+271A	Heavy Greek cross
☓	☓	U+2613	Saltire
✖	✖	U+2716	Heavy multiplication X
✱	✱	U+2731	Heavy asterisk
✯	✯	U+272F	Pinwheel star
※	※	U+203B	Reference mark
⁂	⁂	U+2042	Asterism
§	§	U+00A7	section sign
♠	♠	U+2660	black spade suit
♣	♣	U+2663	black club suit
♥	♥	U+2665	black heart suit
♦	♦	U+2666	black diamond suit
♪	♪	U+266A	eighth note
♫	♫	U+266B	beamed eighth notes

Penggunaan Unicode Hex dalam CSS

Penggunaan Unicode Hex dalam CSS menggunakan :before pseudo-element ataupun :after pseudo-element, seperti contoh menggunakan Hex pada baris 1 (U+2640), penggunaaan pada css-nya dibawah ini:

CSS

.unicode {
   display: block;
   background: #fff;
   padding: 15px 20px 15px 45px;
   margin: 0 0 20px;
   position: relative;

/*Font*/
   font-family: Georgia, serif;
   font-size: 16px;
   line-height: 1.2;
   color: #666;
   text-align: justify;
}

.unicode:before{
   content: "\2640"; /*Unicode Hex*/

/*Font*/
   font-family: Georgia, serif;
   font-size: 60px;
   font-weight: bold;
   color: #999;

/*Positioning*/
   position: absolute;
   left: 10px;
   top:5px;
}

Untuk yang tidak menyukai icon berupa gambar, karakter unicode bisa menjadi pilihan yang baik untuk menampilkan icon-icon yang kita inginkan.

Semoga bermanfaat