deZige

Ikon Unicode Karakter Decimal Dan Hex Dalam HTML

List Ikon Unicode Karakter Decimal Dan Hex Dalam HTML dan cara penggunaanya dalam CSS menggunakan :before pseudo-element ataupun :after pseudo-element

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 Character Decimal and Hex

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

No comments:

Terima Kasih Atas Komentar Anda

  • +Bagikan
  • +Admin

Kontak SosMed

.
deZige