Tutorial Stats
How To Add A Calendar Icon To The Dates Of Your Weebly Blog Posts​
Tutorial Description
This tutorial will show you how to put a calendar, or any icon, directly before or after the date in your blog posts of your Weebly blog.
SHOW MORE
Tutorial
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.
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.
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".
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);
}
.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.
Recent Weebly Tutorials
Recent Comments
