How to replicate special characters in html ?

Word has a built-in list of standard bullets, complete with what font to use. This is the THREE-D TOP-LIGHTED RIGHTWARDS ARROWHEAD from Wingdings. While you can specify that font and insert the right character code U+F0D8, it will depend on the web page viewer's system if they see the correct character. If the font Wingdings is not on the viewer's system, they will (most likely) see something like Ø – totally wrong!

The trick is to not specify a particular font, and to use the correct Unicode character. This arrow is U+27A2 in Unicode's List of Dingbat characters.

Using a Unicode character, without specifying a font, will make most web browsers automatically scan their fonts for one that contains the character.

In your CSS, you can use this:

ul { list-style: none; }
li:before { content: "\27A2"; }

and henceforth, all of your lists will automatically have the arrow you want.

See Custom bullet symbol for

elements in

that is a regular character, and not an image for more options on how to adjust the indent.