What is Font-IGN?

How to use it?

You can use Font-IGN 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://{Path_to_font_IGN}/font-ign.css" rel="stylesheet" />

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

<i class="fi-location"></i>

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

<span class="fi-polygon"></span>

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

<svg class="font-ign fi-2x">
  <use xlink:href="path/to/dist/font-ign.svg#fi-polygon" />
</svg>

NPM package

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


fi-location

Unicode: - Theme: -

Icon size and color

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

Use CSS color to change font color:

Fixed width icons

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

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

Stacked icons

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

<span class="fi-stack fg-3x">
  <i class="fi-simple-user" style="color:#999;"></i> 
  <i class="fi-check-user" style="color:#080;"></i> 
</span>

Animations

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

...spin or pulse...