javascript - 如何在传单中使用很棒的图标库

Question

我正在尝试将很棒的图标库与传单一起使用。我包括这些库以及 Bootstrap ，如下所示:

<link rel="stylesheet" href="~/lib/leaflet/leaflet.css" />
<link rel="stylesheet" href="~/lib/Leaflet.awesome-markers/leaflet.awesome- 
markers.css" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font- 
awesome.css" rel="stylesheet">
<link 
 href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
rel="stylesheet">
<script src="~/lib/leaflet/leaflet.js"></script>
<script src="~/lib/Leaflet.awesome-markers/leaflet.awesome-markers.js"> 
</script>


var mymap = L.map('Lmap').setView([41.607116, 2.286993], 10);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    fadeAnimation: false,
    zoomAnimation: false,
    markerZoomAnimation: false,
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(mymap);


var redMarker = L.AwesomeMarkers.icon({
    icon: 'coffee',
    markerColor: 'red'
});

var yellowMarker = L.AwesomeMarkers.icon({
    icon: 'star',
    markerColor: 'orange'
});

var greenMarker = L.AwesomeMarkers.icon({
    icon: 'spinner',
    markerColor: 'green'
});

    var markers = [
    L.marker([41.349412, 2.151421], {
        title: 'Martainer',
        id: '1',
        icon: redMarker
    }).addTo(mymap).bindPopup('<b>Localización: </b> Martainer' + '<br /><b>Tipo: </b> Contador de ejes'),
    L.marker([41.580323, 2.285579], {
        title: 'Granollers',
        id: '5',
        icon: greenMarker
    }).addTo(mymap).bindPopup('<b>Localización: </b> Granollers' + '<br /><b>Tipo: </b> Contador de ejes'),
    L.marker([42.858531, -2.682275], {
        title: 'Vitoria',
        id: '7',
        icon: yellowMarker
    }).addTo(mymap).bindPopup('<b>Localización: </b> Vitoria' + '<br /><b>Tipo: </b> Contador de ejes')
]

我的问题是我只看到一些图标，例如主页或开始...... 我想查看据说我应该能够使用的所有图标。为什么我不能使用火车？我该怎么做？我应该将这些图标下载到我的项目中吗？ 我正在执行以下步骤: https://github.com/sigma-geosistemas/Leaflet.awesome-markers 谢谢

Answer 1

尝试添加属性 prefix作为fa

注意: 前缀默认为glyphicon

var mymap = L.map('Lmap').setView([41.607116, 2.286993], 10);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18,
  fadeAnimation: false,
  zoomAnimation: false,
  markerZoomAnimation: false,
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(mymap);


var redMarker = L.AwesomeMarkers.icon({
  icon: 'coffee',
  markerColor: 'red',
  prefix: 'fa'
});

var yellowMarker = L.AwesomeMarkers.icon({
  icon: 'train',
  markerColor: 'orange',
  prefix: 'fa'
});

var greenMarker = L.AwesomeMarkers.icon({
  icon: 'spinner',
  markerColor: 'green',
  prefix: 'fa',
  spin: true
});

var markers = [
  L.marker([41.349412, 2.151421], {
    title: 'Martainer',
    id: '1',
    icon: redMarker
  }).addTo(mymap).bindPopup('<b>Localización: </b> Martainer' + '<br /><b>Tipo: </b> Contador de ejes'),
  L.marker([41.580323, 2.285579], {
    title: 'Granollers',
    id: '5',
    icon: greenMarker
  }).addTo(mymap).bindPopup('<b>Localización: </b> Granollers' + '<br /><b>Tipo: </b> Contador de ejes'),
  L.marker([42.858531, -2.682275], {
    title: 'Vitoria',
    id: '7',
    icon: yellowMarker
  }).addTo(mymap).bindPopup('<b>Localización: </b> Vitoria' + '<br /><b>Tipo: </b> Contador de ejes')
]

#Lmap {
  position: absolute;
  top: 35px;
  left: 0;
  width: 100%;
  height: 80%
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.min.js"></script>

<div id="Lmap"></div>