Using Calender Icons

With this tutorial, I will show you how to show the date and the month on a cute calender icon

Step 1. Find/ or create your calender icon, i am using this one from truechaos.co.uk.
Step 2. Place this somewhere into your CSS. This is for the main styling for the calender. Place the url of your calender icon where it says "CALENDER URL". For the height and the width, be sure you have the correct height and width for your specific calender icon
calendar { background:url(CALENDER URL); height:48px; width:45px; float:left; margin-right:5px;}
Step 3. Place this after your calendar css. You may change the color codes, font style, font size, and font decoration as you wish. The css bit labeled month is for the upper rectangle part of the calender icon, and the bit labeled date is for the larger square part.
.month{ color:#ffffff; font:10px arial; text-transform:uppercase; text-align:center; padding-top:5px;} .date{ color:#42424; font:20px arial; text-align:center; padding-top:3px;}
Step 4. Lastly, put this code, wherever you'd like your calender icon to show up. Put the first 3 letters of the month in MONTH HERE, and the current date of the month in DATE HERE
<div class="calendar"> <div class="month">MONTH HERE</div> <div class="date">DATE HERE</div> </div>