Step 1. determine the height of the icon

We need to know the height of the area we'll be placing the calendar icon into so it fits perfectly.

You can do this simply by right-clicking on any date in your blog, then clicking on "Inspect Element".

The area height for this tutorial has been determined to be 17px or 17 pixels high. This means the calendar icon we use will need to be no more than 17 pixels in height.

---

Step 2. find and/or resize your calendar icon

If you don't already have your calendar icon, then you'll need to find one. There are many sites that offer free icons. One of them is iconfinder.com.

Once you've obtain your calendar icon, you'll need to resize it to the height obtained in Step 1. You can do this simply with a free photo editing software such as Photoscape.

We've resized our calendar icon to 17px in height.

---

Step 3. Open the html/css editor

Click on "Design" at the top, then click on "Edit HTML/CSS" on the left.

---

Step 4. Upload your calendar icon to weebly

Click on "ASSESTS" and then click on "Upload Files(s)..." in order to find your calendar icon on your desktop and upload it to your Weebly site.

Remember your file's name because we're going to use it in the next step. The file name of this tutorial's calendar icon is "calendar17px.png".

---

Step 5. Add css3 coding

Click on "main-style.css" on the left and add the code below to your css file. Add the file name of your calendar icon obtained from Step 4. to the code below as shown in orange.

.blog-date::before {
  content: url(calendar17px.png);
  float: left;
  padding-right: 7px;
}

If you'd like to place the calendar icon on the right side of the blog post's date instead, simply use the code below instead.

.blog-date::after {
  content: url(calendar17px.png);
}

---

You're done! 
Publish your site to see your blog date's new calendar icon!

---

Tips & additional information

This tutorial can be applied to the "Comments" text of your Weebly blog posts as well. All you need to do is swap out ".blog-date" for ".blog-comments" in the codes from Step 5.

---

comments powered by Disqus