Skip to content
View in the app

A better way to browse. Learn more.

OKCCN - XenForo & IPS Plugin Marketplace

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (โ‹ฎ) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.
  • Language

Using Emojis in HTML

Featured Replies

  • Administrators

Using Emojis in HTML


What are Emojis?

Emojis look like images, but they are not.

Emojis are letters (characters) from the UTF-8 (Unicode) character set:

๐Ÿ˜„ ๐Ÿ˜ ๐Ÿ’—

UTF-8 covers almost all of the characters and symbols in the world.

Emoji Value
๐Ÿ—ป🗻
๐Ÿ—ผ🗼
๐Ÿ—ฝ🗽
๐Ÿ—พ🗾
๐Ÿ—ฟ🗿
๐Ÿ˜€😀
๐Ÿ˜😁
๐Ÿ˜‚😂
๐Ÿ˜ƒ😃
๐Ÿ˜„😄
๐Ÿ˜…😅

HTML Emojis Examples

Smileys

๐Ÿ˜€ ๐Ÿ˜‚ ๐Ÿ˜Š ๐Ÿ˜Ž ๐Ÿ˜œ

Hands

โœŒ โœŠ โ˜ โœ‹ ๐Ÿ‘Œ

People

๐Ÿ‘ฎ ๐Ÿง• ๐Ÿ‘ฆ ๐Ÿ’ ๐Ÿคด

Office

๐Ÿ“ˆ ๐Ÿ’ป ๐Ÿ“Œ ๐Ÿ“† ๐Ÿ“’

Places

โ›บ ๐ŸŒ‹ ๐Ÿ—ฝ ๐Ÿ—ฟ ๐Ÿข

Transport

๐Ÿšˆ ๐Ÿš— ๐Ÿšข ๐ŸšŒ ๐Ÿš€

Animals

๐Ÿด ๐Ÿ• ๐Ÿ˜ ๐Ÿป ๐Ÿž

Food

โ˜• ๐ŸŒญ ๐Ÿž ๐Ÿฉ ๐Ÿฃ

Plants

๐ŸŒด ๐ŸŒณ ๐ŸŒผ ๐Ÿ ๐Ÿฅ‘

Fruits

๐Ÿ‡ ๐ŸŠ ๐Ÿ ๐Ÿฅ ๐Ÿฅฅ

Sports

โšฝ ๐Ÿ† ๐Ÿคฟ ๐Ÿ‹ โ›ณ

Earth & Sky

๐ŸŒ ๐ŸŒ ๐ŸŒ– ๐ŸŒŸ ๐ŸŒž

Weather

โ›… โ˜” ๐ŸŒˆ ๐ŸŒ‚ โ›„

Clothing

๐Ÿ‘š ๐Ÿ‘• ๐ŸŽฉ ๐Ÿ‘œ ๐Ÿ‘ 

Audio/Video

๐ŸŽฅ ๐ŸŽต ๐ŸŽน ๐Ÿ”Š ๐Ÿ“บ

Celebration

๐ŸŽ ๐ŸŽƒ ๐ŸŽˆ ๐ŸŽ“ ๐ŸŽ‚

Entertainment

๐ŸŽจ ๐ŸŽช ๐ŸŽญ ๐ŸŽก ๐ŸŽข

Symbols

๐Ÿ’ก ๐Ÿ’ฐ ๐Ÿ” ๐Ÿ”ž ๐Ÿ””

Learn More:

Full HTML Emoji Reference


The HTML charset Attribute

To display an HTML page correctly, a web browser must know the character set used in the page.

This is specified in the <meta> tag:

<meta charset="UTF-8">

If not specified, UTF-8 is the default character set in HTML.


UTF-8 Characters

Many UTF-8 characters cannot be typed on a keyboard, but they can always be displayed using numbers (called entity numbers):

  • A is 65
  • B is 66
  • C is 67

Example

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>

<p>I will display A B C</p>
<p>I will display &#65; &#66; &#67;</p>

</body>
</html>

Example Explained

The <meta charset="UTF-8"> element defines the character set.

The characters A, B, and C, are displayed by the numbers 65, 66, and 67.

To let the browser understand that you are displaying a character, you must start the entity number with &# and end it with ; (semicolon).



Emoji Characters

Emojis are also characters from the UTF-8 alphabet:

  • ๐Ÿ˜„ is 128516
  • ๐Ÿ˜ is 128525
  • ๐Ÿ’— is 128151

Example

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>

<h1>My First Emoji</h1>

<p>&#128512;</p>

</body>
</html>

Since Emojis are characters, they can be copied, displayed, and sized just like any other character in HTML.

Example

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>

<h1>Sized Emojis</h1>

<p style="font-size:48px">
&#128512; &#128516; &#128525; &#128151;
</p>

</body>
</html>

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions โ†’ Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.