CSS not loading in Firefox or IE. Works in Chrome - html

Question

I've created a simple church directory in which I edited the CSS to change one of the default Map Markers to one of my own. The issue that I am having is that the Map marker is displayed correctly on Chrome and Safari but not Firefox IE or Edge.
copticchurch-directory.org
Code
/*
Theme Name: Listify Child
Theme URI: http://astoundify.com/themes/listify
Template: listify
Version: 1.0
*/
.job_listing-rating-wrapper,
.map-marker-info .rating,
.single-comment-rating,
.star-rating-wrapper {
display: none !important;
}
.type-job_listing.style-grid .job_listing-entry-footer {
display: none;
}
.ion-information-circled
{
content: url(http://copticchurch-directory.org/wp-content/uploads/2016/08/Map-Marker1.svg);
}
.ion-ios.information-circled
{
content: url(http://copticchurch-directory.org/wp-content/uploads/2016/08/Map-Marker1.svg);
}
.ion.md.information-circled
{
content: url(http://copticchurch-directory.org/wp-content/uploads/2016/08/Map-Marker1.svg);
}

Answer 1

The problem is with the use of the content property on regular elements. Use instead the background property, which will have better cross-browser support.
Change the following:
.ion-information-circled {
content: url(...);
}
Into this:
.map-marker .ion-information-circled::before {
content: "";
background: url(...)
}
https://jsfiddle.net/eyvetdz4/2/