[an error occurred while processing this directive]
LWD logoLori's Web DesignLWD logo

How to Decorate your Web Pages with Red Hearts
Using Character Entities and CSS

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".

No Need for Images to decorate your web page with Red Hearts

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.

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>

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

See more CSS TIPS

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

Lori's Web Design
All Rights Reserved

Twitter     Facebook