LWD logoLori's Web DesignLWD logo

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: in modern browsers. If not, try using charset utf-8 or upgrade your browser.

If you'd like a larger sized heart just add the size to a span tag like this:

<span class="redheart" style="font-size:300%;">&hearts;</span>

See more CSS TIPS

Here is a discussion on this bug in Firefox/Mozilla:
Mozilla Bug 212745 - Suit Symbols

Sites with lists of HTML Character Entities:
Character Entity References in HTML


Copyright © 10-12-07 - updated 10-26-16

Lori's Web Design
All Rights Reserved

Twitter     Google+     Facebook     linked in