A white square is showing under the symbol

[vincedchart]

How to remove it?

using * leaflet.motion - v0.3.2 (https://github.com/Igor-Vladyka/leaflet.motion#readme)

var dataCoords = [];

function doMotion() {
  var seqGroup = L.motion.seq([
    L.motion.polyline(dataCoords, {
    color: "MediumVioletRed",
    weight: 10,
    opacity: 0.8
    }, {
      easing: L.Motion.Ease.easeInOutQuad
    }, {
      removeOnEnd: false,
      icon: L.divIcon({html: "<i class='fa fa-hiking fa-2x' aria-hidden='true'></i>", iconSize: L.point(27.5, 24)})
    }).motionDuration(8000)
  ]).addTo(map);
  seqGroup.on("click", function(){
    seqGroup.motionStart();
  });
  seqGroup.on("dblclick", function(e){
    seqGroup.motionToggle();
  });
  setTimeout(function () {
    seqGroup.motionStart();
  }, 1000);
};



var wfsLayer = L.Geoserver.wfs("https://mappingforyou.eu/geoserver/worldmap/ows", {
 layers: "worldmap:debra",
});


wfsLayer.on('layeradd', function(evt) {
  var coords;
  var geometry = evt.layer.feature.geometry;
  if (geometry.type = 'MultiLineString')
    coords = geometry.coordinates[0];
  else if (geometry.type = 'LineString')
    coords = geometry.coordinates;
  else {
    return;
  }
  coords.forEach(function(coords) {
     dataCoords.push([coords[1], coords[0]]);
  });
  doMotion();
});

[rumbleh]

    <style>
        .leaflet-div-icon {
            background: transparent !important;
            border: none !important;
            color: black;
        }
    </style>

[vincedchart]

@rumbleh thank you !

it's working but it's creating a conflict with leaflet draw and leaflet editable, removing their handles!
(pictured are those handles at the normal state)

[Igor-Vladyka]

@vincedchart you need to change CSS to be as specific as possible. something like:

    <style>
        .leaflet-div-icon.fa-hiking,
        .leaflet-div-icon .fa-hiking {
            background: transparent !important;
            border: none !important;
            color: black;
        }
    </style>