是否可以在Mapbox標記中使用Font Awesome圖標？

Question

我正在使用Maki套圖標，但它們非常有限，希望能夠使用Font Awesome圖標。這可能嗎？

下面是我用來設置標記圖標的代碼。

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

Answer 1

如果所包含您的網頁上的字體真棒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/

Answer 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] 
}));