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: -

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.

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...