Code by Day | Explore By Weekend
How To Add Icons To The Divi Events Calendar Tutorial by Pee Aye Creative

How To Add Icons To The Divi Events Calendar

This tutorial will show you how to add icons to the Divi Events Calendar plugin to the stacked event details in the events feed module.
Divi Events Calendar plugin modules by Pee-Aye Creative

Add Icons To The Divi Event Details

We added two features to version 1.4 of the Divi Events Calendar that allow you to stack the event details on their own lines, and along with that to remove the prepositions and dividers. This opens up the door for more possibilities, such as icons to the left side of each event item.

So to begin, make sure you go to the Events Feed module settings. Open the Elements toggle and turn off “Show Prepositions & Dividers.”

Next, go to the Design tab and open the Layout toggle. Turn on “Stack Event Details.”

Next, copy the CSS below and paste it into your website. If you are not sure where to add the code, check out our tutorial called Where To Add Custom Code In Divi. The short answer is to copy the code snippet and add it in Divi>Theme Options>Custom CSS box.

/*move event time over to the right*/

.ecs-eventTime {
   margin-left: 30px;
}


/*add icon to event time*/

.ecs-eventTime:before {
   font-family: 'ETmodules';
   content: "\e06b";
   position: absolute;
   color: #0048ff;
   left: 14px;
}

/*move event date over to the right*/

.ecs-eventDate {
   margin-left: 30px;
}


/*add icon to event date*/

.ecs-eventDate:before {
   font-family: 'ETmodules';
   content: "\e023";
   position: absolute;
   color: #0048ff;
   left: 14px;
}


/*move event venue over to the right*/

.ecs-venue {
   margin-left: 30px;
}


/*add icon to event venue*/

.ecs-venue:before {
   font-family: 'ETmodules';
   content: "\e081";
   position: absolute;
   color: #0048ff;
   left: 14px;
}


/*move event address over to the right*/

.ecs-location {
   margin-left: 30px;
}


/*add icon to event address*/

.ecs-event-location:before {
   font-family: 'ETmodules';
   content: "\e081";
   position: absolute;
   color: #0048ff;
   left: 14px;
}


/*move event organizer over to the right*/

.ecs-organizer {
   margin-left: 30px;
}


/*add icon to event organizer*/

.ecs-organizer:before {
   font-family: 'ETmodules';
   content: "\e08a";
   position: absolute;
   color: #0048ff;
   left: 14px;
}


/*move event price over to the right*/

.ecs-price {
   margin-left: 30px;
}


/*add icon to event organizer*/

.ecs-price:before {
   font-family: 'ETmodules';
   content: "\e07b";
   position: absolute;
   color: #0048ff;
   left: 14px;
}



/*move event categories over to the right*/

.ecs-categories {
   margin-left: 30px;
}


/*add icon to event categories*/

.ecs-categories:before {
   font-family: 'ETmodules';
   content: "\e078";
   position: absolute;
   color: #0048ff;
   left: 14px;
}


/*move event url over to the right*/

.ecs-weburl {
   margin-left: 30px;
}


/*add icon to event url*/

.ecs-weburl:before {
   font-family: 'ETmodules';
   content: "\e02c";
   position: absolute;
   color: #0048ff;
   left: 14px;
}

Here’s how that looks on our demo website.

icons in the Divi Events Calendar event details

And of course you can customize this however you want. You could change the color, size, and even choose different icons.

Choosing The Icons

The icons I used in the code snippet are actually from the built-in Divi ETModules icon font family, which I chose to use to keep it simple and easy. You can learn more about these icons on the Elegant Themes blog post here. You will need to reference this to get the icon codes if you want to change any of the icons.

elegant Themes icons in the Divi Events Calendar event details

This is just screenshot of a few of the icons available. The part that can be confusing here is the icon code. You don’t actually need the first part of the code, so you can disregard the &#x part of it. So for the fourth one in the second row here you can see we only used “e081” to get the pin location icon.

You Could Also Use Font Awesome

If you want more options, you can use Font Awesome instead. If you already have Font Awesome integrated with your website then you are a step ahead. Otherwise, check out our tutorial on How To Add Font Awesome To Divi.

How To Add Font Awesome Icons to Divi Tutorial by Pee-Aye Creative

To use a Font Awesome icon, you will need to replace the font family in the snippets. But don’t worry, it’s very easy. Just change the “ETModules” to “Font Awesome 5 Free.”

The next line in the CSS is the icon code. You can replace the “24” with the icon code from Font Awesome. Simply go search their icon library and click on an icon. Then, copy the Unicode as shown in the image below.

choosing a Font Awesome icon for your divi menu

In this example, the icon Unicode is “f102,” so all we have to do is add this to the CSS snippet like “content: “f102″;” and the icon will appear.

15

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

become partners with Pee Aye Creative

Partner With Us

We are looking for you!

Learn More

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart