是否可以在 Mapbox 标记中使用 Font Awesome 图标？答案

【问题标题】：Is is possible to use Font Awesome icons in Mapbox Markers?是否可以在 Mapbox 标记中使用 Font Awesome 图标？
【发布时间】：2014-07-22 21:05:03
【问题描述】：

我正在使用 Maki 图标集，但它们非常有限，希望能够使用 Font Awesome 图标。这可能吗？

这是我用来设置标记图标的代码。

marker.setIcon(L.mapbox.marker.icon({
    'title': jobid,
    'marker-color': '#e32f2f',
    'marker-symbol': 'square'
}));

【问题讨论】：

标签： icons marker mapbox

【解决方案1】：

如果您在页面中包含了字体 Awesome CSS，则可以使用 L.DivIcon 构造函数来创建自定义图标。

<style>
/*
 * Unlike other icons, you can style `L.divIcon` instances with CSS.
 * These styles make each marker a circle with a border and centered
 * text
 */
.fa-icon {color: red;}
</style>
<div id='map'></div>
<script>
var map = L.mapbox.map('map', 'examples.map-i86nkdio')
    .setView([45.52245801087795, -122.67773866653444], 3);

L.marker([45.52245801087795, -122.67773866653444], {
    icon: L.divIcon({
        // specify a class name that we can refer to in styles, as we
        // do above.
        className: 'fa-icon',
        // html here defines what goes in the div created for each marker
        html: '<i class="fa fa-camera-retro fa-3x"></i>',
        // and the marker width and height
        iconSize: [40, 40]
    })
}).addTo(map);

这是一个完整的例子：http://jsbin.com/tiyote/1/

【讨论】：

这个方法很容易推广到非fa图标。 +1

【解决方案2】：

感谢您的帮助。根据您的示例，我能够更新我的原始代码以使用 L.divIcon 而不是 L.mapbox.marker.icon。

marker.setIcon(L.divIcon({
    className: 'count-icon-emergency',
    html: '<i class="fa fa-check"></i>',
    iconSize: [40, 40]
}));

【讨论】：