Star Issue Watch Tweet

What is Font-Cassini?

Font-Cassini is a set of icons and graphics I've been using in my projects.
Font-Cassini 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-Cassini is free, open source, and GPL friendly!

How to use it?

You can use Font-Cassini 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-cassini/css/font-cassini.css" rel="stylesheet" />

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

<i class="fc-paroisse-chateau"></i>

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

<span class="fc-champ-bataille"></span>

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

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

NPM package

To use Font-Cassini in your project, install the font-cassini package: 

npm install --save git+https://github.com/IGNF-Ma-carte/font-ign.git

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


fc-paroisse-chateau

Unicode: - Theme: -

Icon size and color

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

Use CSS color to change font color:

Fixed width icons

Use fc-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 fc-rotate* classes to rotate icons (-20, -10, 10, 20, 45, 90, 135, 180, 225, 270 or 315).

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

Animations

Use fc-spin or fc-pulse classes to animate icons.

...spin or pulse...