Question

如何为小册子插件Leaflet.awesome-markers升级到Font Awesome 5？此插件尚未在github上更新一段时间，并使用字体真棒v4。

这是一个应用程序，它使用mapbox，leaflet和leaflet awesome marker with font awesome v4并且工作正常。

我试图像这样升级到Font Awesome 5：

app.scss

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

和index.html：

var marker = L.AwesomeMarkers.icon({
  markerColor: 'blue',
  prefix: 'fa',
  extraClasses: 'fas',
  icon: 'music'
});

升级到Font Awesome 5后，小册子标记显示图标太小，而不是标记的中心。他们对v4是正确的。

我发现了这种可能的解决办法，但没有区别，图标仍然太小而且没有居中：https://gist.github.com/pikesley/0197f9ea8aff737e6b80c945f741d584

# mysql> show grants for <your user>;

如何解决Font Awesome 5的问题？

Answer 1

正如@mwilkerson's answer所建议的，您当前的代码混合了Font Awesome 5的JS和Webfonts CSS方法。只需要一种方法。

Webfonts CSS：

Webfonts Font Awesome 5方法似乎与（不再维护）插件一起正常工作 lvoogdt/Leaflet.awesome-markers version 2.0.2：

（此处使用'arrow-alt-circle-down'图标表示它已正确居中，因为'music'非常不对称）

＆＃13;

var paris = [48.86, 2.35];
var map = L.map('map').setView(paris, 11);

var marker = L.AwesomeMarkers.icon({
  markerColor: 'blue',
  prefix: 'fa',
  extraClasses: 'fas',
  icon: 'arrow-alt-circle-down' //'music'
});

L.marker(paris, {
  icon: marker,
}).addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

＆＃13;

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers@2.0.2/dist/leaflet.awesome-markers.css" />
<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://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div id="map" style="height: 180px"></div>

＆＃13;

JS方法：

JS Font Awesome 5方法用<i>动态替换<svg>元素，因此它不再由plugin CSS设置样式。

您可以通过复制CSS规则轻松恢复此样式：

.awesome-marker svg {
  color: #333;
  margin-top: 10px;
  display: inline-block;
  font-size: 14px;
}

＆＃13;

var paris = [48.86, 2.35];
var map = L.map('map').setView(paris, 11);

var marker = L.AwesomeMarkers.icon({
  markerColor: 'blue',
  prefix: 'fa',
  extraClasses: 'fas',
  icon: 'arrow-alt-circle-down' //'music'
});

L.marker(paris, {
  icon: marker,
}).addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

＆＃13;

.awesome-marker svg {
  color: #333;
  margin-top: 10px;
  display: inline-block;
  font-size: 14px;
}

＆＃13;

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers@2.0.2/dist/leaflet.awesome-markers.css" />
<script src="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers@2.0.2/dist/leaflet.awesome-markers.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>

<div id="map" style="height: 180px"></div>

＆＃13;

Answer 2

我要解决此问题的第一步是确定您是否需要使用Font {* 3}}方法的Webfonts with CSS方法，然后关注一，删除另一个。

在您的示例代码中，您要同时加载app.scss中的Webfonts和index.html中<script>块中的SVG / JS。

或许解决设置问题将解决整个问题。或者至少，它将有助于清理问题，以识别并排除任何剩余问题。

我建议从Webfonts方法开始，看看你是否可以使用它。如果是这样，那么只需从<script>删除index.html块。

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

Answer 3

在地图中实现超赞图标的步骤：

将此链接添加到index.html文件（根文件）（如果是应用程序的话）

 <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
})

在Font Awesome 5中使用Leaflet.AwesomeMarkers插件？

3 个答案: