Home / / How to Change the Default Categories Icon from Listing Card Unit

How to Change the Default Categories Icon from Listing Card Unit

20 views

The theme includes a default icon for the actions area, added via CSS using a Fontello icon.

If you want to replace this icon with a Font Awesome Free icon, you can easily do so through the Customizer → Additional CSS.

Default Icon CSS

By default, the icon is added with the following CSS:

.actions_icon:after {
position: absolute;
top: 17px;
left: 12px;
width: 20px;
height: 23px;
background-repeat: no-repeat;
content: "\e80e";
font-family: "fontello";
color: #b881fc;
font-size: 27px;
}

How to Replace the Icon

To change the icon, go to:

Appearance → Customize → Additional CSS

Add this code:

.actions_icon:after {
content: "\f007"; /* Replace with any Font Awesome Free icon code */
font-family: "Font Awesome 5 Free";
font-weight: 900;
}

Then replace \f007 with the Unicode value of the Font Awesome Free icon you want to use.

You can browse available icons at:
https://fontawesome.com/icons