# Font-gis

SVG icons and font to use with GIS and spatial analysis tools

- Font-GIS
- Icons
- Examples

Star Issue Watch Tweet

## What is Font-GIS?

Font-GIS is a set of icons and graphics I've been using in my projects.
Font-GIS icons and font theme is designed mainly for GIS applications and web mapping tools. Feel free to use it in your commercial or open source projects, or really almost whatever you want. Font-GIS is free, open source, and GPL friendly!

## How to use it?

You can use Font-GIS as a font or as SVG symbols or images.

To use it in a web page, just add the css in your project.

    <link href="https://viglino.github.io/font-gis/css/font-gis.css" rel="stylesheet" />

Then use an inline element with a class prefixed with fg- to add a new icon.

    <i class="fg-poi"></i>

Using a <span> is more semantically correct but a little bit verbose:

    <span class="fg-polyline-pt"></span>

Or use it as an svg sprite (svg sprites are inlocated in the `./dist/font-gis.svg` file):

    <svg class="font-gis fg-2x">
      <use xlink:href="path/to/dist/font-gis.svg#fg-polyline-pt" />
    </svg>

## NPM package

Font-GIS is avaliable on NPM. To use Font-GIS in your project, install the font-gis package:

    npm install --save font-gis

The font is located in the `./font` directory, the css and svg sprites are located in the `./css/font-gis.css` and `./dist/font-gis.svg` files of the font-gis project.

## fg-poi

Unicode: - Theme: -

icons
new
Loading:

## Icon size and color

To increase icon sizes relative to their container, use the `fg-lg` (33% increase), `fg-2x`, `fg-3x`, `fg-4x`, or `fg-5x` classes.

Use CSS color to change font color:

## Fixed width icons

Use `fg-fw` class to set icons at a fixed width. Especially designed to use in nav lists & list groups to preserve alignment.

- Road map
- Transport
- Landcover
- Cadastre map

## Rotated and flipped icons

Use `fg-rotate*` classes to rotate icons (-20, -10, 10, 20, 45, 90, 135, 180, 225, 270 or 315).

Use `fg-flipv` or `fg-fliph` classes to flip icons vertically or horizontally.

## Stacked icons

To stack multiple icons, use the `fg-stack` class on the parent.

    <span class="fg-stack fg-3x">
      <i class="fg-compass" style="color:#666;"></i>
      <i class="fg-compass-needle fg-rotate45" style="color:#800;"></i>
    </span>

## Animations

Use `fg-spin` or `fg-pulse` classes to animate icons.

...spin or pulse...