SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    I need html character code for circle bullet point

    This can either be unicode so I can use it in :before or :after content ' '; (preferably) or regular html character. Been looking for over an hour. None of the unicode I find seems to work with content ' ': and the regular html entities show up square - I need a circle. On sites that show these http://www.alanwood.net/demos/ent4_frame.html thier example shows a circle. Using firebug I see no charcters on ly a circle which tells me they are using a keyboard to input it maybe. But I cant find that either. HELP!

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I ended up going a different direction. Still would be nice to have in my pocket though.

  3. #3
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,277
    Mentioned
    119 Post(s)
    Tagged
    1 Thread(s)
    Not sure what you're looking for, but there's the bullet -

    & #8226; or & bull;
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    The bull one displays as a square. And none that I have found display using content: " ";

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    8226 one displays as a square also

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I want a circle

  7. #7
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,277
    Mentioned
    119 Post(s)
    Tagged
    1 Thread(s)
    On the page you linked to, it does display as a circle.....
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  8. #8
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,277
    Mentioned
    119 Post(s)
    Tagged
    1 Thread(s)
    Do you have a generic list-style-type in your css? If so, that would explain the shape issue.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  9. #9
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,311
    Mentioned
    19 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by EricWatson View Post
    This can either be unicode so I can use it in :before or :after content ' '; (preferably) or regular html character. Been looking for over an hour. None of the unicode I find seems to work with content ' ': and the regular html entities show up square - I need a circle. On sites that show these http://www.alanwood.net/demos/ent4_frame.html thier example shows a circle. Using firebug I see no charcters on ly a circle which tells me they are using a keyboard to input it maybe. But I cant find that either. HELP!
    HTML entities will of course only work in HTML. In CSS, you would use \2022.

    content: "\2022"
    "First make it work. Then make it better."

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I'll test it on a blank page with no other css. And I'll test that css number you posted. Thanks guys

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Yes, you can either use that code, or with characters like that that have no other meaning in CSS, you can just paste the character in as well:

    Code:
    p:before {content: "\2022";}
    p:before {content: "•";}

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I use the first in content, because it also is needed for Javascript so all my stuff's the same.

    content: \0a ( i use this for making spaces all the time, instead of just a literal space character) and \bb for my >> markings in lists.

    But they could have managed to copy-pasta the character.

    I had a page where I used an anchor purely for a hover effect. I wanted to put something cute in the markup and have it show in the address-status bar in the browser, and the image in the anchor was related to the game Duck Hunt. So I thought I'd go to the Wikipedia page about it and copy the Japanese name there-- after all, Wikipedia must be UTF-8 right?

    Well it never showed up correctly and I ended up needing to copy the text from a site using the jp character encoding instead. Even though all my stuff is UTF-8 as well and my browser was set to UTF-8.

  13. #13
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, you can either use that code, or with characters like that that have no other meaning in CSS, you can just paste the character in as well:

    Code:
    p:before {content: "\2022";}
    p:before {content: "";}
    Ralph how did you you copy and paste that circle? Did you copy it somewhere or did you use the keyboard?

  14. #14
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Ralph how did you you copy and paste that circle? Did you copy it somewhere or did you use the keyboard?
    Alt+0149 gives a •.

  15. #15
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Alt+0149 gives a •.
    Thanks Stevie. I saw that in my searches. I tried it. By trying to stuff 5 fingers at one time on my keyboard. It didnt work though. I feel like I'm missing something.

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Ralph how did you you copy and paste that circle?
    Yes, just copied and pasted it from a plain text file.

  17. #17
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    huh. Rookie mistake. Just tested it. Seems I have something in my css overriding it. Because on there own they all show up as a circle. Still though the content p:before {content: "\2022";} is a good one to keep in my snippets. Thanks guys!

  18. #18
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Thanks Stevie. I saw that in my searches. I tried it. By trying to stuff 5 fingers at one time on my keyboard. It didnt work though. I feel like I'm missing something.
    You only need two fingers (or thumbs) at a time!

    Make sure NumLock is turned on.
    With your left index finger, press Alt.
    With your right index finger on the numeric keypad, press 0 then let go then press 1 then let go then press 4 then let go then press 9 then let go.
    Release the Alt.

    Of course, if you are using a laptop without a numeric keypad then it gets a bit more complicated! (I did once work out how to use the faux-numeric keypad on my laptop. Once. I've since forgotten. Drat.)

  19. #19
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    !


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •