Skip to content
Related Articles

Related Articles

How to apply emoji hex code in list-style type to create custom list point ?

View Discussion
Improve Article
Save Article
  • Last Updated : 19 Jul, 2021
View Discussion
Improve Article
Save Article

You can pass emoji hex code in list-style-type for both ordered and unordered lists to create custom list points.

We use the following syntax in the CSS.  You need to write the hex code for emojis in your CSS list-style-type property. You can refer to the HTML emojis article to know the hex code for emojis. 

Syntax:

ul,ol{
  list-style-type: "\write correct hex code";
}

After using this style our list will not start with numbers, but it will be replaced with emojis.

Note: You need to insert “\” before every hex code.

Example 1:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
      
    <style>
        ul{
           list-style-type: "\231B";
        }
        ol
        {
            list-style-type: "\1F604";
        }
    </style>
</head>
<body>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul>
    <ol>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ol>
</body>
</html>

Output:

Example 2:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
      
    <style>
        ul
        {
            list-style-type: "\270D";
        }
        ol
        {
            list-style-type: "\2705";
        }
    </style>
</head>
<body>
    <ul>
        <li>geeks</li>
        <li>for</li>
        <li>geeks</li>
    </ul>
    <ol>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
    </ol>
</body>
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!