Using Special Characters Instead of Default Bullets

HTML & CSS
1

How do I change the default bullet points to a special character? Instead of the circles I want to use “&#9672”. Below is my code.

<ul>
    <li style="list-style-type:disc; text-align:left; color:#696969; font-family: Arial; padding-right: 35px;font-size:18px;">Copy for first in list</span></li>
    <li style="list-style-type:disc; text-align:left; color:#696969; font-family: Arial; padding-right: 35px;font-size:18px;">Copy for second in list</span></span></li>
    <li style="list-style-type:disc; text-align:left; color:#696969; font-family: Arial; padding-right: 35px;font-size:18px;">Copy for third in list</span></li>
    <li style="list-style-type:disc; text-align:left; color:#696969; font-family: Arial; padding-right: 35px;font-size:18px;">Copy for forth in list</span></li>
    <li style="list-style-type:disc; text-align:left; color:#696969; font-family: Arial; padding-right: 35px;font-size:18px;">Copy for fifth in list</span></span></li>
    <li style="list-style-type:disc; text-align:left; color:#696969; font-family: Arial; padding-right: 35px;font-size:18px;">Copy for sixth in list</span></li>
</ul>
2

You can use CSS’ list-style-type to do this: https://developer.mozilla.org/en/docs/Web/CSS/list-style-type

1 Like
3

I have been trying that…currently it reads:

<ol>
    <li style="list-style-type:disc; text-align:left; color:#696969; font-family: Arial; padding-right: 35px;font-size:18px;">Copy for first in list</span></li>
    <li style="list-style-type:disc; text-align:left; color:#696969; font-family: Arial; padding-right: 35px;font-size:18px;">Copy for second in list</span></span></li>
    <li style="list-style-type:disc; text-align:left; color:#696969; font-family: Arial; padding-right: 35px;font-size:18px;">Copy for third in list</span></li>
    <li style="list-style-type:disc; text-align:left; color:#696969; font-family: Arial; padding-right: 35px;font-size:18px;">Copy for forth in list</span></li>
    <li style="list-style-type:disc; text-align:left; color:#696969; font-family: Arial; padding-right: 35px;font-size:18px;">Copy for fifth in list</span></span></li>
    <li style="list-style-type:disc; text-align:left; color:#696969; font-family: Arial; padding-right: 35px;font-size:18px;">Copy for sixth in list</span></li>
</ol>

I can change it to numbers, letters, etc. but I can’t get it to change to a special character. Any ideas?

4

not sure why it doesn’t show my code only the output…new to this site…is there a way to paste the code?

5

Use [ code ] and [ /code ] (without the spaces) to post code. Like so:

<ul>
  <li>first</li>
  <li>second</li>
</ul>
6

This should do it.

ul {list-style-type: '◈';}
7

Somehow using a character as list-style-type doesn’t work for me, at least not in codepen. I also tried simple characters, like “x”, and it still just displays discs. This does work for me: http://codepen.io/anon/pen/ZOVmQG :slight_smile:

8

Is it a browser thing, this works OK for me in Firefox

Does it work on your’s?

9

on a different site someone suggested:

    and then adding:
    ul.special_bullet {

    list-style: none;

    }
    ul.special_bullet li:before {

    color: #000;

    content: “\27bd \0020”;

    }

    but apparently, I have no idea where this code should go.

10

No, I still see discs, no special characters. I’m on Chrome 52.0.2743.116 (64-bit) on Fedora 24 (Linux).

11

It changed it from a bullet to “1.”

12

Check the codepen again, it saved a change I did not want to keep.
This is what I see.

13

No dice, I still see discs

14

Mine keeps changing to the number 1.

15

It goes in a CSS file, not mixed with the text.
Do you have any experience with CSS yet?

16

looks perfect on yours! That’s all want!

17

Just looked in Chrome and I see discs there.

18

no I am just plugging away learning

19

In that case you should probably start with a basic tutorial on what CSS is, like https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS

20

great thanks! I will check it out…looks like a light read. Ha!