MapFont is the icon font and CSS, ready to be dropped right into Bootstrap, or any project that needs high quality map, geotag, and topographical based icons!

Getting started

To use the MapFont, place the main CSS files in your CSS directory, and the font files in a "font" directory on the same folder level as the CSS director. Once you've done that, all you need to do to reference an icon in your HTML is type <i class="mf mf-petrol-station"></i>

All icons

mf-petrol-station
f021
mf-gas-station
f022
mf-car-charger
f023
mf-car-rent
f025
mf-vehicle-ferry
f026
mf-car-wash
f027
mf-slippery-road
f028
mf-car-accident
f029
mf-map-marker
f031
mf-map-marker-square
f032
mf-paper-map
f033
mf-online-map
f034
mf-plane
f041
mf-helicopter
f042
mf-bike
f045
mf-old-scooter
f046
mf-scooter
f047
mf-ricksha
f048
mf-quad-bike
f049
mf-sportcar
f04a
mf-off-road
f04b
mf-truck
f04c
mf-bus
f04d
mf-trolleybus
f04e
mf-tram
f04f
mf-subway
f050
mf-monorail
f051
mf-train
f052
mf-funicular
f053
mf-cableway
f054
mf-snowmobile
f055
mf-water-scooter
f057
mf-shop
f061
mf-market
f062
mf-stock
f063
mf-business-center
f064
mf-post
f065
mf-atm
f066
mf-shower
f067
mf-wc
f068
mf-cafe
f069
mf-bar
f06a
mf-restaurant
f06b
mf mf-carpenter
f06c
mf-mechanic
f06d
mf-gym
f06f
mf-playground
f070
mf-museum
f071
mf-sculpture
f072
mf-monument
f073
mf-fountain
f074
mf-square
f075
mf-park
f076
mf-pharmacy
f077
mf-rabbit
f078
mf-anchor
f079
mf-battletank
f080
mf-spike
f081
mf-day-cloudy
f082
mf-factory
f083
mf-outdoor-table
f084
mf-tent
f085
mf-home
f086
mf-pin
f087
mf-camping
f088
mf-disabled
f089
mf-ambulance
f090
mf-hospital
f091
mf-first-aid-station
f092
mf-mobile-hospital
f093
mf-first-aid-kit
f094
mf-medication
f095
mf-hospital-ward
f096

Utility Classes

Use these special, built-in utility classes to flip, rotate, or assign a fixed width to any icon.

Flip

mf-flip-horizontal

mf-flip-vertical

Rotate

mf-rotate-90

mf-rotate-180

mf-rotate-270

Fixed Width

mf-fw

Online map

mf-gmap-api

mf-ymap-api

Google Map integration

‹script type="text/javascript"›
point = new MarkerWithLabel({
  position: new google.maps.LatLng(57.145, 65.523),
  draggable: false,
  raiseOnDrag: false,
  icon: ' ',
  // Type "spacebar" to deactivate standard icon
  map: gMap,
  labelContent: '<i class="mf mf-map-marker-square mf-gmap-api"></i>',
  // Use standard MapFont classes with addition class mf-gmap-api
  labelAnchor: new google.maps.Point(57.145, 65.523)
});
‹/script›
 Download font and templates

Yandex Map integration

‹script type="text/javascript"›
point = new ymaps.GeoObject({
  geometry: {
    type: "Point",
    coordinates: [57.145, 65.523]
  },
  properties: {
    iconContent: '<i class="mf mf-map-marker mf-ymap-api"></i>',
    // Use standard MapFont classes with addition class mf-ymap-api
    balloonContent: 'Point desctiption'
  }
}, {
  preset: 'islands#grayCircleIcon',
  // Best view with light colour circle icon
  draggable: true,
}),
‹/script›
 Download font and templates

Leaflet integration

‹script type="text/javascript" src="Leaflet.Icon.Glyph.js"›
‹script type="text/javascript"›
function fillMap(green) {
  var myCenter = new L.LatLng(57.145, 65.523);
  var map = new L.Map('leaflet', {center: myCenter, zoom: 14});
  var positron = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap',
    maxZoom: 24,
    maxNativeZoom: 18
  }).addTo(map);
  L.marker([57.145, 65.523], {icon: L.icon.glyph({ prefix: 'mf', glyph: 'mf-map-marker', glyphSize: '24px' }) }).addTo(map);
}
fillMap(true);
});
‹/script›
 Download font and templates

OpenLayers integration

‹script type="text/javascript"›
var pointLayer = new OpenLayers.Layer.Vector('Overlay', {
  styleMap: new OpenLayers.StyleMap({
    'default': {
      fill: false,
      stroke: false,
      label: "\uf031",
      //Use \u and unicode index
      labelXOffset: 0,
      labelYOffset: 0,
      fontColor: "#000000",
      fontSize:"20px",
      fontOpacity: 1,
      fontFamily: "MapFont",
      labelOutlineWidth: 2
    }
  })
});
‹/script›
 Download font and templates