将Leaflet.AwesomeMarkers插件与Font Awesome 5一起使用? [英] Using Leaflet.AwesomeMarkers plugin with Font Awesome 5?

问题描述

如何为传单插件 Leaflet.awesome-markers 升级到Font Awesome 5 一个>?这个插件已经有一段时间没有在github上更新了，并且使用了真棒v4字体.

How do I upgrade to Font Awesome 5 for the leaflet plugin Leaflet.awesome-markers? This plugin has not been updated on github for some time and uses font awesome v4.

这是针对使用mapbox，leaf和leaflet令人敬畏的标记以及awesome v4字体的应用程序，

This is for an app that uses mapbox, leaflet and leaflet awesome markers with font awesome v4 and works correctly.

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

I've tried to upgrade to Font Awesome 5 like so:

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:

And index.html:

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

升级到Font Awesome 5后，传单标记显示的图标太小，而不是在标记的中心.他们对v4是正确的.

After upgrading to Font Awesome 5, the leaflet markers are displaying with the icons too small, and not in the center of the marker. They were correct with v4.

我发现了这个可能的修复程序，但是没有什么区别，图标仍然太小并且没有居中: https://gist.github.com/pikesley/0197f9ea8aff737e6b80c945f741d584

I found this possible fix, but it made no difference, the icons are still too small and not centered: https://gist.github.com/pikesley/0197f9ea8aff737e6b80c945f741d584

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

如何为Font Awesome 5修复此问题?

How can I fix this for Font Awesome 5?

推荐答案

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

As suggested by @mwilkerson's answer, your current code mixes the JS and Webfonts CSS approaches of Font Awesome 5. Only one approach is necessary.

Webfonts CSS:

Webfonts Font Awesome 5方法似乎可以(不再维护)插件正常工作 lvoogdt/Leaflet.awesome-markers版本2.0.2 :

The Webfonts Font Awesome 5 approach seems to work fine with the (no longer maintained) plugin lvoogdt/Leaflet.awesome-markers version 2.0.2:

(此处使用'arrow-alt-circle-down'图标显示其正确居中，因为'music'是非常不对称的)

(here using the 'arrow-alt-circle-down' icon to show that it is correctly centered, because the 'music' one is very asymmetric)

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方法通过<svg>动态替换<i>元素，因此不再使用

The JS Font Awesome 5 approach dynamically replaces the <i> element by an <svg>, therefore it is no longer styled by the plugin CSS.

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

You can easily restore this styling by duplicating the CSS rule:

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

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>

这篇关于将Leaflet.AwesomeMarkers插件与Font Awesome 5一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！