SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question about CSS content property

    hello everyone,
    i recently saw a few nice examples with the CSS content attribute in order to achieve nice symbols and drawings, however when searching for a complete list of the symbols available i couldn't find any, and i wondered if anyone here knows where i can find such a list where i can see all (or some) of the symbols that i can create using this property

    an example of a content is this:
    Code:
    content:"\2656"
    will result in a drawing of a tower

    and this:
    Code:
    content:"\2655"
    will result in a drawing of a crown

    thanks,
    ulthane

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    There's a list here that may be useful.

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey paul, thanks for the link but it didnt help me, it misses alot of drawings & symbols unfortunately.

  4. #4
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)

  5. #5
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ya thats the one! thanks

  6. #6
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    At your Service! :-)

  7. #7
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I got another question related to this, i see many of these stuff requires font that i dont have, therefore i belive many others dont so i dont want to put such a thing in a website and take risk
    point is that i want to use unicode so that the 'image' im going to put will be affected by fonts (which will not happen with acutall image), so i wondered if there's any way around it to get the symbols i want?

  8. #8
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    If you don't have the correct Unicode font stack and the user doesn't have any of those fonts then the symbol probably won't render as expected perhaps showing a place-holder. Perhaps CSS font embedding might have effect if it were normal text and you had the font licence but it's probably overkill.

  9. #9
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    thank u for ur reply
    unfortunately i just noticed another downside with using the content attribute, its not supported from IE7 and below! that blows
    is there any alternative to the CSS content attribute?

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You shouldn't really be using generated content for important content so it shouldn't really matter. Generated content should enhance the page but not reduce its function if not present.

    You can fix IE with a quick expression if you want.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    p:after {
    	content:" Hello";
    	color:red;
    }
    p { zoom:expression(  runtimeStyle.zoom=1,  insertAdjacentHTML('beforeEnd', '<span class="after">Hello</span>')  );
    }
    .after { color:red }
    </style>
    </head>
    
    <body>
    <p></p>
    </body>
    </html>
    Requires Javascript of course but as I said above only supply content that isn't critical and it won't matter.

  11. #11
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I use content in replacement of small images, like facebook / twitter logos, also using them in order to style lists better
    Its critical because IE is already ugly enough when it doesnt have support for many stuff (like rounded borders / shadows), so also content, its like 2 different websites when looking through chrome / IE7
    I dont care much for IE6 acutally, but i still want to fix it for IE7 snce its still used around (specially by XP users)
    Thanks for ur solution ill try it out now

    edit: hmm can u explain how that expression works to me ?


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
  •