Leaflet 使用Font AwesomeMarkers插件和字体Awesome5？

如何将传单插件升级到字体Awesome5？这个插件已经有一段时间没有在github上更新了，它使用的是字体可怕的v4

这是一个应用程序，使用地图盒，传单和传单可怕的标志与字体可怕的v4和正确的工作

我已尝试升级到字体可怕5，如下所示：

app.scss

@import url('webfonts/font-awesome-pro-5.0.1.css');
@import url('webfonts/fa-solid-900.ttf');
@import url('webfonts/fa-solid-900.woff');
@import url('webfonts/fa-solid-900.woff2');
@import url('webfonts/fa-regular-400.ttf');
@import url('webfonts/fa-regular-400.woff');
@import url('webfonts/fa-regular-400.woff2');

和index.html：

<script src="scripts/fontawesome-all-5.0.1.min.js"></script>

---

如何解决Font Aowesome 5的问题？

解决此问题的第一步是确定是否需要使用Font Aowesome 5的方法，还是使用该方法，然后将重点放在该方法上，删除另一个

在示例代码中，您正在使用

块加载

app.scss

中的Webfonts和

index.html

中的SVG/JS

也许解决这个设置问题将解决整个问题。或者至少，它将有助于解决问题，以识别和排除任何遗留问题

我建议您从Webfonts方法开始，看看您是否可以使用它。如果是这样，那么只需从

index.html

中删除该

块即可

但是，在从v4升级到v5（）方面存在一些常见问题。其中一个问题与在这些主要版本之间更改的某些图标的名称有关（链接的升级文档列出了已更改的特定图标名称）。有一个v4垫片，可以通过自动将任何纯v4图标名称转换为v5对应名称来简化升级过程。但这个v4垫片仅适用于SVG with JavaScript方法（关于同一链接升级文档的详细信息）。因此，如果您需要使用v4垫片，那么您需要将重点放在SVG和JavaScript方法上，并将webfont加载放到

app.scss

中。正如所建议的，您当前的代码混合了Font Awesome 5的JS和Webfonts CSS方法。只有一种方法是必要的

Webfonts CSS:

Webfonts Font Aowesome 5方法似乎可以很好地与插件（不再维护）配合使用 :

（此处使用

'arrow-alt-circle-down'

图标显示其正确居中，因为

'music'

一个非常不对称）

巴黎var=[48.86,2.35]； var map=L.map（“map”）.setView（巴黎，11）； var marker=L.AwesomeMarkers.icon({ 标记颜色：“蓝色”， 前缀：“fa”， 课外活动：“fas”， 图标：“箭头alt向下旋转”/“音乐” }); L.marker（巴黎{ 图标：标记， }).addTo（地图）； L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{ 属性：“©；贡献者” }).addTo（地图）

---

在地图中实现可怕图标的步骤：

如果应用程序需要，请将此链接添加到index.html文件（根文件）

列表项 将图标附加到标记上

leaflet.marker([property.lat, property.long], {
  icon: marker
})

---

作为旁注：您可能可以使用，它支持任何图标字体（但您需要提供标记图像）。

 <script src="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers@2.0.2/dist/leaflet.awesome-markers.js"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers@2.0.2/dist/leaflet.awesome-markers.css"/>

var marker = leaflet.AwesomeMarkers.icon({
  icon: 'arrow-alt-circle-down', //'music'
  markerColor: 'blue',
  prefix: ' fa fa-fa fa-paint-brush',

});

leaflet.marker([property.lat, property.long], {
  icon: marker
})