如何在传单中使用awersome图标库

Question

I'm trying to use the awesome icons library with leaflet. I'm including these libraries as well as the bootstrap like follows:

<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')
]

My problem is that I'm just seeing a few icons like the home or the start... I would like to see all the icons that it is said I should be able to use. Why I can't use for example the train? How can I do it? Should I download these icons into my project? I'm following these steps: https://github.com/sigma-geosistemas/Leaflet.awesome-markers Thank you

Answer 1

Try adding a property prefix as fa

Note: prefix defaults to 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>