Can't remove original markers from map when device is mobile

Question

Im working on a project with mapbox and I have my own icons which I want to use instead the original native markers of mapbox. After seeing that the "setIcon" function did not remove the original grey markers but only add my icons next to them, I used this css command to remove them:

.leaflet-container img.leaflet-marker-          icon[src~="http://a.tiles.mapbox.com/v4/marker/pin-    m+7e7e7e.png?access_token=pk.eyJ1IjoiZGF2aWRoYWxmb24iLCJhIjoibzZhZTlJdyJ9.ab2pmxikBxsmsWEvbfYVfw"]{display:none}

It works great on the web, but when I open the website on mobile it does not work and again I see both, my icons and the native markers.

This is my code for replacing the icons:

locations.eachLayer(function(locale) {
var prop = locale.feature.properties;
locale.setIcon(L.icon({
    iconUrl: './icon.png',  
}));
});

And this is my website: http://www.david-halfon.com/worldRadio/

Thank you for your help!

Answer 1

From the source of your page:

var map = map1.featureLayer.setGeoJSON(geojson)
locations = L.mapbox.featureLayer().addTo(map);
locations.setGeoJSON(geojson);

You're changing the icons on the locations layer, but also adding the same data to the map1.featureLayer , and that layer has the default icons.