Question about CSS content property

**ulthane** · Dec 18, 2011 13:28

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

**Paul O'B** · Dec 18, 2011 14:42

There's a list here that may be useful.

**ulthane** · Dec 19, 2011 09:21

Hey paul, thanks for the link but it didnt help me, it misses alot of drawings & symbols unfortunately.

**xhtmlcoder** · Dec 19, 2011 13:10

The usual HTML 4.01 suspects: http://www.w3.org/TR/html4/sgml/entities.html#iso-88591

This might make it easier to see: http://en.wikipedia.org/wiki/List_of_Unicode_characters

**ulthane** · Dec 19, 2011 13:25

ya thats the one! thanks

**xhtmlcoder** · Dec 19, 2011 13:46

At your Service! :-)

**ulthane** · Dec 19, 2011 13:55

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?

**xhtmlcoder** · Dec 20, 2011 15:00

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.

**ulthane** · Dec 21, 2011 09:16

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?

**Paul O'B** · Dec 21, 2011 09:38

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.

**ulthane** · Dec 21, 2011 09:47

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 ?

User Tag List

Thread: Question about CSS content property

Thread Tools

Display

Question about CSS content property

Bookmarks

Bookmarks

Posting Permissions