• Stars
    star
    218
  • Rank 176,014 (Top 4 %)
  • Language
    CSS
  • License
    Other
  • Created about 3 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Icon font and SVG for use with GIS and spatial analysis tools

Font-GIS

Icon font set for use with GIS and spatial analysis tools

I've collected in this repo 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. They can be easily included in a project using the font or svg images.

See demo page and examples

Getting started

NPM package

Font-GIS is availiable on npm:

npm install --save font-gis

You can access the font or css in the ./font and ./css directory of the package.
The svg sprites are located in the ./dist/font-gis.svg SVG file.

using Font-GIS

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.

<!-- prefix: fg - icon name: poi -->
<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-3x"><use xlink:href="path/to/dist/font-gis.svg#fg-polyline-pt" /></svg>

Contributing

Please use the GitHub issue tracker to ask for new features or create a pull request.
Font is created from the files in the ./svg folder, you only have to create a new file in this folder. Use the ./templates/template.svg template to create a new icon.
You can add a new glyph in the font-gis.json file with a theme and search tags (other fields will be filled automatically).

Your contribution will be published under Font-GIS license as per GitHub's terms of service.

If you wan't to build the font and create the dist, use the build script (run npm install to install the dev dependencies before):

npm run build

Use a local server (http://localhost:8181/) to see result on the page:

npm start

Licenses

Copyright (c) 2021 Jean-Marc Viglino

Font-GIS is free, open source, and GPL friendly. You can use it for commercial projects, open source projects, or really almost whatever you want. Read full Font-GIS license

Attribution is required by MIT, SIL OFL, and CC BY licenses. Font-GIS files already contain embedded comments with sufficient attribution, so you shouldn't need to do anything additional when using these files normally.

Press

More Repositories

1

ol-ext

Cool extensions for Openlayers (ol) - animated clusters, CSS popup, Font Awesome symbol renderer, charts for statistical map (pie/bar), layer switcher, wikipedia layer, animations, canvas filters.
JavaScript
1,142
star
2

iconicss

More than 900 pure CSS3 icons!
CSS
119
star
3

ol-games

🎮 Game stuff for Openlayers, powered by HTML5, canvas, javascript and Openlayers.
JavaScript
87
star
4

OL3-AnimatedCluster

OL3-AnimatedCluster is now part of the ol-ext project
JavaScript
68
star
5

Map-georeferencer

A proof of concept to georeference maps with Openlayers (ol).
JavaScript
65
star
6

ol-ext-angular

Using Openlayers (ol) and ol-ext with Angular 7
TypeScript
43
star
7

Canvas-TextPath

Adds extra functionality to the CanvasRenderingContext2D to draw text along a path.
JavaScript
40
star
8

OpenLayers-ext

Extending the OpenLayers 2 library with cool stuff: CSS popup, spreading cluster, Font Awesome symbol renderer, charts for statistical map (pie/bar), text along lines...
JavaScript
19
star
9

geoservice-style

You know the difference is between you and me? 😎 I make this look good.
JavaScript
17
star
10

Geoportail-KISS

A KISS interface to integrate mapping services of the French Geoportail (IGNF) in the main JavaScript mapping API (OpenLayers, Leaflet, OL3, Google). A jQuery plugin draw Leaflet maps in a div.
HTML
12
star
11

css-page-loader

Lightweight CSS loading animations to use when page loads.
CSS
9
star
12

GeoJSONX

Compress (minify) GeoSJON file
JavaScript
7
star
13

insee-map

Display 2.3 million squares provided by the French statistical institute (INSEE) sub-dividing the country into regular grids.
JavaScript
3
star
14

vagabondage

Jeu de rôle en solitaire, Vagabondage permet d’incarner un protagoniste en fuite dans la campagne française. Entre survie et rencontres, il se base sur l’utilisation du portail web des cartes et photographies aériennes de l’IGN.
JavaScript
3
star
15

parcel-cordova

CSS
2
star
16

MapChallenge2022

My #30DayMapChallenge 2022
JavaScript
2
star
17

jCSSRule

A simple jQuery plugin to manipulate CSS styleSheet and set dynamic rules.
HTML
1
star
18

i18n.js

A small Javascript library for internationalization
JavaScript
1
star
19

decko-cards

JavaScript
1
star