abbanoob abbanoob - 3 months ago 14
CSS Question

CSS not loading in Firefox or IE. Works in Chrome

Let me preface this by saying that I am new to CSS and basic web development. With that being said... 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

PW godislove



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

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.

https://jsfiddle.net/eyvetdz4/2/

enter image description here