4

如何为传单插件Leaflet.awesome-markers升级到 Font Awesome 5 ？这个插件已经有一段时间没有在 github 上更新了，使用 font awesome v4。

这适用于使用 mapbox、leaflet 和 leaflet awesome 标记和 font awesome v4 并且可以正常工作的应用程序。

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

应用程序.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 Awesome 5 后，传单标记显示的图标太小，并且不在标记的中心。他们对 v4 是正确的。

在此处输入图像描述

我找到了这个可能的解决方法，但没有什么区别，图标仍然太小而且不居中：https ://gist.github.com/pikesley/0197f9ea8aff737e6b80c945f741d584

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

如何为 Font Awesome 5 解决这个问题？

4

3 回答 3

4

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

网络字体 CSS：

Webfonts Font Awesome 5 方法似乎适用于（不再维护的）插件 lvoogdt/Leaflet.awesome-markers 版本 2.0.2：

带有 Font Awesome 5 webfonts 的 Leaflet.awesome-markers 的屏幕截图

（这里用'arrow-alt-circle-down'图标表示它是正确居中的，因为那个'music'很不对称）

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

JS方法：

JS Font Awesome 5 方法将<i>元素动态替换为 ，因此插件 CSS<svg>不再对其进行样式设置。

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

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

带有 Font Awesome 5 JS 的 Leaflet.awesome-markers 的屏幕截图

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);
.awesome-marker svg {
  color: #333;
  margin-top: 10px;
  display: inline-block;
  font-size: 14px;
}
<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>

于 2018-06-03T08:29:01.353 回答
2

我要解决这个问题的第一步是确定您是否需要为 Font Awesome 5使用带有 CSS 的 Webfonts方法，还是使用带有 JavaScript 的 SVG方法，然后专注于那个，删除另一个。

在您的示例代码中，您正在加载：您的 Webfonts 和您的app.scssSVG/JSindex.html与<script>块。

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

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

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

于 2018-05-25T21:15:00.473 回答
0

在地图中实现真棒图标的步骤：

  1. 如果应用程序将此链接添加到 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"/>

  2. 添加这个变量

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

});

  3. 列表项将图标附加到标记

    leaflet.marker([property.lat, property.long], {
  icon: marker
})
于 2018-12-03T15:03:21.497 回答