How to Decorate your Web Pages with Red Hearts
Using Character Entities and CSS
No Need for Images
<♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥
The following CSS tip provides instructions on how to decorate your web pages with red hearts and other symbols, using special character entities found in the ascii set of characters and symbols. No images needed.Character entities are provided in HTML to represent certain characters and symbols such as
copyright: ©
a registration mark: ®
the Trademark symbol: ™
Hearts are part of the playing card suit characters including a heart, diamond, spade and clover or clubs.
You can color these character entities different colors and use for decorations on your web pages, eliminating the need for images. Not all fonts support the heart entities so use "arial unicode MS".
Set up a class in your CSS file as follows:
.redheart {color:#ff0000; font-size:14px;
font-family:'arial unicode MS', arial, geneva, sans-serif; }
Then include this class in your HTML in a div, paragraph or span tag.
<div class="redheart">♥</div>
The above code should produce this red heart: ♥ as long as you are using Windows IE 6 or IE 7 broswers and charsets ISO 8859-1 or UTF-8 in your web page.
None of the character entities for red hearts work on all browsers
so I have used the one that works in IE 6 being as most of my visitors
use that browser.
Safari 3 on the Mac displays ♡ as a red outlined heart ♡ but it doesn't show up in Windows IE 6 or 7 or Firefox 2 (unless the above fix is applied in Firefox).
Safari 3 on the Mac and Windows IE 6 and 7 will display a narrower heart with a solid color using this character entity for a heart: ♥ ♥ but it doesn't show up in Firefox 2 (unless the above fix is applied in Firefox).
Safari 3 on the Mac and Firefox 2 without the above fix will display ❤ which is a wider heart with a solid color ❤ but it doesn't show up in Windows IE 6 or 7 (this is the only one that works in Netscape 7.2).
Opera 9.10 displays all the above heart character entities correctly.
Here is a discussion on this bug in Firefox/Mozilla:Safari 3 on the Mac and Windows IE 6 and 7 will display a narrower heart with a solid color using this character entity for a heart: ♥ ♥ but it doesn't show up in Firefox 2 (unless the above fix is applied in Firefox).
Safari 3 on the Mac and Firefox 2 without the above fix will display ❤ which is a wider heart with a solid color ❤ but it doesn't show up in Windows IE 6 or 7 (this is the only one that works in Netscape 7.2).
Opera 9.10 displays all the above heart character entities correctly.
Mozilla Bug 212745 - Suit Symbols
Sites with lists of HTML Character Entities:
W3Schools.com
Webmaster Tool Kit
Return to CSS TIPS
Copyright © 10-12-07 - updated 5-26-08
Lori's Web Design
All Rights Reserved
