Create Plain Calendar Icons Using CSS – cal.css

Category: CSS & CSS3 , Date & Time | August 2, 2021
Views Total:1,472 views
Official Page:Go to website
Last Update:August 2, 2021


Create Plain Calendar Icons Using CSS – cal.css


cal.css is a CSS library to create simple plain calendar icons representing any dates.

How to use it:

1. Insert the cal.css stylesheet into the HTML page.

<link rel="stylesheet" href="cal.css" />

2. Create a calendar icon and replace the month & date as follows:

// Jan 1st
<div class="cal">
  <div class="month">January</div>
  <div class="date">1</div>

3. Override the default styles to create your own icon styles.

.cal {
  display: inline-block;
  border: .1px solid #CCCAC5;
  background-color: #FFF;
  width: 250px;
  font-family: Arial, sans-serif;
  text-align: center;
.cal .month {
  height: 50px;
  line-height: 50px;
  font-size: 2rem;
  text-transform: uppercase;
  background-color: #E75951;
  color: #FFF;
.cal .date {
  font-size: 10rem;
  color: #585858;
  line-height: 175px;

You Might Be Interested In:

Leave a Reply