How to replace the PNG sprites with larger custom icons

Once you create your new larger sprites and save as a png file all you need to do is add and modify the following CSS to your theme style.css file.

body .property-feature-icons .icon {
	background-image: url(images/your-new-sprites-file.png) !important;
	background-repeat: no-repeat;
	padding: 0px 20px 4px 46px !important; /* Adjust to fit your sprites */
	width: 43px !important; /* Adjust to fit your sprites */
	height: 43px !important; /* Adjust to fit your sprites */
	overflow: hidden;
	font-size: 1.8em; /* Adjust to fit your sprites */
}
body .property-feature-icons .icon.beds {
	background-position: 0 -260px; /* Adjust to fit your sprites */
}
body .property-feature-icons .icon.bath {
	background-position: 0 -820px; /* Adjust to fit your sprites */
}
body .property-feature-icons .icon.parking {
	background-position: 0 -605px; /* Adjust to fit your sprites */
}
body .property-feature-icons .icon.air {
	background-position: 0 -355px; /* Adjust to fit your sprites */
}
body .property-feature-icons .icon.pool {
	background-position: 0 -355px; /* Adjust to fit your sprites */
}

Once added and adjusted you can have any sized icons you need.

Related Articles