1

I need to have bullet points that look like arrow. They are provided in MS Word

How can I replicate those in HTML ?

enter image description here

I save the word document as html , but the html that is there is pretty complex . Is it possible to have those special character in an html page somehow easier ?

Emily
  • 511
  • 3
  • 11
  • 23

3 Answers3

3

Just re-create the special character to a png/jpeg image (png is preferred due to transparent bg) and replace the bullets with the image using list-style-image like this:

HTML:

<ul class="abcd">
    <li>Some text here</li>
    <li>Some more text here</li>
    <li>Some more random text here</li>
</ul>

CSS:

ul.abcd {
    list-style-image: url(‘/path-to-the-image-file/arrow.png’);
}

Also, You can adjust the image dimensions accordingly.

AndrewL64
  • 15,794
  • 8
  • 47
  • 79
3

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 <li> elements in <ul> that is a regular character, and not an image for more options on how to adjust the indent.

Community
  • 1
  • 1
Jongware
  • 22,200
  • 8
  • 54
  • 100
1

I hate reading answers like the one I'm going to give, but my question is why do you want those specific microsoft word bullet points?

However, if you're being more generic and just want an arrow, there's a lot of answers for this already on stack overflow.

Here's a link to a similar answer: How do I create a Unordered list in html with sub arrows?

Here's some code for this:

HTML:

<ul class="arrow-list">
    <li>San Jaun</li>
</ul>

CSS:

ul.arrow-list { list-style:none; }
ul.arrow-list li:before {
    content: "\2192 \0020";
}

Finally, instead of the \1234 format seen in the css above, you can simply replace that with any of these html codes found on this page for arrows. http://character-code.com/arrows-html-codes.php

Community
  • 1
  • 1
jrobe
  • 107
  • 5