不同的字体来源 leaflet-awesome-marker 和 Leaflet-easy-button

Question

我在传单地图中使用了两个插件：Leaflet.awesome-markers 和 Leaflet.EasyButton.

我通过包含 css 文件并使用 css class:

为 Leaflet.EasyButton 的图标使用由 Fontastic 制作的本地字体

<link rel="stylesheet" href="/src/localIcons.css">
<script>
L.easyButton('<div class="icon1"></div>', function(btn, map){
map.setView([-21.12, 55.5], 10);
},'Réunion').addTo(mymap);
</script>

我想将 fontawesome 的字体用于 Leaflet.awesome-markers 图标，但我不知道如何同时使用这两个，除非我删除，否则 marker 的图标不会显示本地 css 包含在上面。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script>
var colorMarker = L.AwesomeMarkers.icon({
markerColor: black,
prefix: 'fa',
extraClasses: 'fas',
icon: 'times-circle'
});

</script>

看起来标记插件正在搜索我的本地字体 css 而不是使用 fontawesome 的图标。

这是向您展示问题的屏幕截图：

Answer 1

可能发生的是您使用 Fontastic 构建的自定义 Web 字体（您通过 localIcons.css 文件引用）与 Font Awesome 通常使用的一些字符重叠还有。

检查您的 localIcons.css 文件内容可能会提供解释：

Font Awesome 字符的形式为："\f249"
如果您的自定义 Webfont 使用类似的模式（例如 "\f000"），那么重叠的可能性非常高。

一个简单的解决方法是对其中之一使用 SVG，而不是 Web 字体解决方案。

对于带有 Leaflet.awesome 标记的 Font Awesome 5，您可以轻松调整插件以使用 JS+SVG 解决方案。参考：Using Leaflet.AwesomeMarkers plugin with Font Awesome 5?

但我猜你的自定义 Webfont 中可能没有那么多不同的自定义图标，在这种情况下，相反的做法可能更有趣，即使用你的自定义 SVG 和标准 Webfont for Font Awesome。

在 Leaflet Easy Button 中插入 SVG 图像应该没有问题。

如果出于某种原因您仍然想坚持使用 Webfont 方法，您可以尝试将您的自定义图标转换为不同字符集的其他服务，例如http://fontello.com/ 使用模式 \e800.

不同的字体来源 leaflet-awesome-marker 和 Leaflet-easy-button

Different font source leaflet-awesome-marker and Leaflet-easy-button

javascript

css

leaflet

font-awesome-5