p:last-child:after {
content: "\2766"; /* Here comes the ivy leaf */
font-size: 150%; /* Makes the leaf larger than the normal text */
padding-left: 10px; /* Leaf won't clash with the last letter of the text */
float: right; /* Horizontal position is set to the right edge of the column */
position: relative; /* This is just an homage to Albert Einstein */
top: 15px /*Vertical distance from the last line of text */
}
End Articles with Ivy Leaf
Chris Coyier
on
Any example for this css?
#wrapper p:last-child:after {
content: “\2766”; /* Here comes the ivy leaf */
font-size: 150%; /* Makes the leaf larger than the normal text */
position: relative; /* This is just an homage to Albert Einstein */
top: 15px; /*Vertical distance from the last line of text */
display: block; /* Put it on a new line */
text-align: center; /* Put it in the middle */
}
That’s what I’m using, and it looks great.
what this number denotes “\2766″ ,how can i find the ref number for other images.
content: “\2766″; /* Here comes the ivy leaf */
what this number denotes “\2766” ,how can i find the ref number for other images.
content: “\2766″; /* Here comes the ivy leaf */
Here you can find the abundance of unicodes here: http://www.decodeunicode.org/en/u+2615.
If you want to replace the ivy leaf symbol just replace the number accordingly, i.e.:
instead of “\2766″ put “\2615” ( hot beverage )
thnxs
This is unique code for a symbol, just like emojis, there are so many websites where you can get these codes.
Really cool. I randomly entered unicode numbers until I found the star character (2605)I was looking for…
My question is, I can get it to work using css, but I cant’ get it to work within a the html of a web page.
I don’t want it at the end of every story in a div, but only a select few places. I’ve tried
ਭ
and instead get a completely different character than what I get when I use css. Differences in font??What does work is to assign a span .star:after {content:”\2605″} and then within html use a blank span reference <span class=”star”></span>.
No surprise :last-child doesn’t work in IE, but using the span tags does.
oops – the weird character here is the weird one I was referring to. I added the &# in front of the number, and the ; at the end, in typical unicode fashion.
Sorry to confuse anyone, but I discovered &; is for ascii, and &#x; for unicode.
This, inserting ★ worked to insert unicode directly into html.
” position: relative; /* This is just an homage to Albert Einstein */”
The most outstanding part of this code, love it, really :)
For those who are looking for Unicode symbols wikipedia has great tables ordered by categories
I live this tip, really smart. With some modification (p:first-child:before and p:last-child:after) I can use for quote simbol instead of image.
Thanks! :-)
Can someone give me an example of what the HTML would look like?
A bunch of times.
Yea, that doesn’t work.
What IS this? I can’t even find an example. Putting it in my style sheet does nothing to my page(s). Could anyone please elaborate and/or give an example url? Thanks.
Ait, I figured it out. Thanks! :)
You’re not a web designer are you? Stick to Word….
Wow Ang, you’re a typical prick that can be found in the “designer” world. Nothing but A-Holes. This is why most people prefer to ship stuff to India. Don’t have to deal with dips**ts like you.
http://www.isthisthingon.org/unicode/allchars1.php
This has just about every unicode you could imagine. (it may take a bit to load)
The “Font Awesome” icons by Twitter Bootstrap has a huge number of icons along with their unicode.
You do need to download the “Font-Awesome” font though before you could use any of the icons.
http://fortawesome.github.io/Font-Awesome/cheatsheet/
Was kinda unhappy that an example was not shown…. So here is an example :
Ivy Jsfiddler example
get more icons and images here
=> http://www.utf8icons.com/