Styling SVG icons

Introduced in Easy Property Listings 3.2 are SVG icons that you can style and alter using CSS.

First enable SVG icons

Visit Dashboard > Easy Property Listings > Settings > Advanced >  SVG Icons for Listings

Now when you view your listings your icons are now scalable and you can apply CSS styling to the SVG icons.

SVG Icon Classes

Using the following base CSS classes you can style all elements of the SVG icon and its containers.

/** Overall Fill **/
.epl-icon-fill g {
	fill: orange;
}

/** Frame Fill **/
.epl-icon-fill #epl-icon-shape-frame {
	fill: red;
}
.epl-icon-fill .epl-icon-color-base {
	fill: purple;
}

/** Container and size **/
body .epl-icon-svg-container .epl-icon-svg,
body .epl-icon-svg-container .epl-author-icon-svg {
    width: 50px;
    height: 50px;
}
body .epl-icon-svg-container {
	background: #c4c4c4;
	border-radius: 60px;
	padding: 10px;
}
body .epl-icon-svg-container .epl-icon svg {
	line-height: 50px;
}
body .epl-icon-svg-container .icon-value {
	font-size: 1.4em;
	text-align: center;
	line-height: 50px;
}

Social SVG Icons

You can also colour the Social icons with the following CSS.

.epl-icon-social .epl-icon-shape-base {
	fill: green; /* Outer rounded box */
}
.epl-icon-social .epl-icon-color-hollow {
	fill: red;  /* The icon items */
}