Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 19 Jul, 2021

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :