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:

a copyright sign: ©
a registration mark: ®
the Trademark symbol:
a right facing arrow:
a downward arrow:

Hearts are part of the playing card suit characters including a heart, diamond, spade and clover or clubs. There are several collections of character entities such as the Greek Alphabet, Mathematical Symbols, International Characters and much more!

You can color these character entities different colors and enlarge them 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".

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; }

Now 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>

It should result in a large red hear like this:

To add a line of red hearts on your web page you just need to repeat the code above. Copy and paste the following code into your web page. You can add or subtract a line for more or less red hearts. You can center it on the page with a div.

<span class="redheart" style="font-size:300%; padding:8px;">♥</span>
<span class="redheart" style="font-size:300%; padding:8px;">♥</span>
<span class="redheart" style="font-size:300%; padding:8px;">♥</span>
<span class="redheart" style="font-size:300%; padding:8px;">♥</span>
<span class="redheart" style="font-size:300%; padding:8px;">♥</span>
<span class="redheart" style="font-size:300%; padding:8px;">♥</span>
<span class="redheart" style="font-size:300%; padding:8px;">♥</span>







If you want a vertical line of hearts add a break tag after each line. You may want to adjust the padding between hearts or adjust with line-height

<span class="redheart" style="font-size:300%; padding:8px;">♥</span><br>
<span class="redheart" style="font-size:300%; padding:8px;">♥</span><br>
<span class="redheart" style="font-size:300%; padding:8px;">♥</span><br>
<span class="redheart" style="font-size:300%; padding:8px;">♥</span><br>
<span class="redheart" style="font-size:300%; padding:8px;">♥</span><br>
<span class="redheart" style="font-size:300%; padding:8px;">♥</span><br>
<span class="redheart" style="font-size:300%; padding:8px;">♥</span><br>

Do the same with other Character Entities and have fun decorating your web pages

Other Resources for Character Entities

Sites with lists of HTML Character Entities:
W3Schools.com

Character Entity References in HTML

Here is a discussion of problems using Character entities on older Firefox browsers:
Mozilla Bug 212745 - Suit Symbols

See more CSS TIPS

Copyright © 10-12-07 - updated 1-12-19
Lori's Web Design
All Rights Reserved