Get started in 3 simple steps:

This document shows you how easy it is to integrate the font into your web project

1. Load the font

Copy the entire gifont directory into your project.

2. Reference to CSS

In the HEAD of your html, reference the location to the font.css. Each font weight has its own CSS file.

3. Insert symbols

Open the html document of the fonts and select a desired symbol

Copy the CSS class displayed under the icon.
Tip: With CMD + F (Mac) or CTRL + F (Windows), you can quickly find the right icon with the tags in the CSS classes.

Paste the copied CSS class code into your HTML document. Use a DIV container.

<div class="gi-00103-battery_full_power_electricity_charge"></div>

CSS Control

Make sure your CSS file is loaded into the HTML document. Check the head section in your HTML document. Here is an example of loading a CSS file:

Place your icon in a div container. For example:

<div class="icon"> <div class="gi-00103-battery_full_power_electricity_charge"></div> </div>

Go to the CSS file and link the class. For example:

Now you can apply all CSS commands you know :)

Change the font weight

To change the fontstyles (regular, bold, light, glyph, black) you need only css the command font-weight. open sample file

• Light: font-weight: 100;

• Regular: font-weight: 200;

• Bold: font-weight: 400;

• Glyph: font-weight: 600;

• Black: font-weight: 800;