Lori's Web Design
my facebook     my twitter     My blog

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">&hearts;</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.

If you are seeing a red square box outline or a red vertical line where the red hearts should be then your browser does not support that character entity or character set. It will show up in Firefox 2 if you go to Preferences > Content > Fonts & Colors (Advanced) > Fonts for: Japanese > and choose "Osaka"

Safari 3 on the Mac displays &#9825; 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: &hearts;   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 &#10084; 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:
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



 
Serving Spokane, WA, Colfax WA, Deer Park WA, Medical Lake WA, all of Eastern WA and across the USA

Lori's Web Design Spokane: 509-443-8693
or Colfax: 509-397-6000

Copyright © 2000 - 2012
All Rights Reserved