get started

Using the mapskin CDN

  • Add the following link tag to the <head> section of your HTML document:
  • <link href="https://mapskincdn.appspot.com/1.0/mapskin.min.css" rel="stylesheet">
    
  • Add an example icon anywhere in the <body> section using the inline element bellow:
  • <i class="ms ms-zoom"></i>
    
  • and enjoy !

Using your own mapskin copy

Examples

Basic icon

<i class="ms ms-zoom"></i>
Icons are designed to work with HTML inline elements such as the span or i tags.

Icon sizes

<i class="ms ms-max-extent ms-2x"></i>
<i class="ms ms-max-extent ms-3x"></i>
<i class="ms ms-max-extent ms-4x"></i>
<i class="ms ms-max-extent ms-5x"></i>
Icons size can be set using the ms-2x to ms-10x CSS classes (e.g from 2em to 10em font-size).

Fixed width

  •   Map
  •   Database
  •   Processes
  •   Catalog
<ul class="list-unstyled">
  <li class="list-item"><i class="ms ms-map-rolled-o ms-fw"></i>Map</li>
  <li class="list-item"><i class="ms ms-database-o ms-fw"></i>Database</li>
  <li class="list-item"><i class="ms ms-processes ms-fw"></i>Processes</li>
  <li class="list-item"><i class="ms ms-catalog ms-fw"></i>Catalog</li>
</ul>
Use the ms-fw class to set icons to a fixed with (usefull for lists or dropdowns).

Bootstrap

Button

<a class="btn btn-default" href="#"><i class="ms ms-information"></i>/a>
<a class="btn btn-primary" href="#"><i class="ms ms-information"></i></a>
<a class="btn btn-success" href="#"><i class="ms ms-information"></i></a>
<a class="btn btn-warning" href="#"><i class="ms ms-information"></i></a>
<a class="btn btn-danger" href="#"><i class="ms ms-information"></i></a>

Dropdown

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Download <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="ms ms-kml"></i> KML</a></li>
    <li><a href="#"><i class="ms ms-shp"></i> SHP</a></li>
    <li><a href="#"><i class="ms ms-geojson"></i> GeoJSON</a></li>
  </ul>
</div>

Toolbar

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default"><i class="ms ms-pan-hand"></i></button>
    <button type="button" class="btn btn-default"><i class="ms ms-select-arrow"></i></button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default"><i class="ms ms-identify"></i></button>
    <button type="button" class="btn btn-default"><i class="ms ms-draw"></i></button>
    <button type="button" class="btn btn-default"><i class="ms ms-topographic-profile"></i></button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default"><i class="ms ms-permalink"></i></button>
  </div>
 </div>

mapskin