Installation¶

npm¶

Add @gufo-labs/font package to your project:

npm install @gufo-labs/font

CSS¶

<link rel="stylesheet" href="https://gf.cdn.gufolabs.com/latest/gufo-font.css"/>

todo: Archive¶

Using Stencils¶

To add a network node use <i> tag with the required classes:

<i class="gf gf-1x cisco-router"></i>

Where:

gf - Enables Gufo Font.
gf-1x - Use network-map size (64x64px).
cisco-router - The icon name (see the icons list for details).

Rendered result:

Colour States¶

Apply a state class to indicate the network node’s status.

gf-unknown¶

Marks the node as being in an unknown state.

Example:

<i class="gf gf-1x gf-unknown cisco-router"></i>

Rendered result:

gf-ok¶

Indicates the node is up and operational.

Example:

<i class="gf gf-1x gf-ok cisco-router"></i>

Rendered result:

gf-warn¶

Indicates the node has active alarms or warnings.

Example:

<i class="gf gf-1x gf-warn cisco-router"></i>

Rendered result:

gf-fail¶

Marks the node as in a critical failure state.

Example:

<i class="gf gf-1xgf-fail cisco-router"></i>

Rendered result:

Colors¶

Gufo Font goes with predefined sets of colors styles:

Style	Color
`gf-black`
`gf-write`
`gf-turquoise`
`gf-emerald`
`gf-green-sea`
`gf-nephritis`
`gf-sunflower`
`gf-orange`
`gf-carrot`
`gf-pumpkin`
`gf-peter-river`
`gf-belize-hole`
`gf-amethyst`
`gf-wisteria`
`gf-alizarin`
`gf-pomegranade`
`gf-clouds`
`gf-silver`
`gf-wet-asphalt`
`gf-midnight-blue`
`gf-concrete`
`gf-asbestos`

Size¶

By default, the icon size is determined by the current font size settings. Icons scale automatically with the surrounding text.

Example:

Network Map Sizes¶

Gufo Font defines a dedicated set of size styles intended for use in network maps. These styles provide consistent and visually balanced icon sizing when rendering network topologies, diagrams, and dashboards. Use the predefined network map size classes to ensure uniform appearance across different zoom levels and layouts.

`gf-1x`	`gf-2x`	`gf-3x`
		\

Exact Sizes¶

You can also set an exact icon size using pixel-based classes:

Default	`gf-16px`	`gf-24px`	`gf-32px`	`gf-48px`

Arbitrary Sizes¶

You can set an arbitrary size using --gf-size variable:

<i class="gf gf-3x cisco-router" style="--gf-size:100px"></i>

Renders as:

Rotation¶

You can rotate glyph using "rotation classes". Rotation angles are measured clockwise:

Default	`gf-r90`	`gf-r180`	`gf-270`

To rotate an arbitrary angle use gf-transform class along with --gf-rotate variable:

<i class="gf gf-1x gf-transform cisco-router" style="--gf-rotate:33deg"></i>

Rendered as:

Flipping¶

In addition to rotation, you can flip (mirror) a glyph across the vertical axis (gf-flip-v), the horizontal axis (gf-flip-h), or both axes (gf-flip).

Default	`gf-flip-v`	`gf-flip-h`	`gf-flip`

Subscript and Superscript¶

Subscript and superscript glyphs are smaller variants used to annotate or modify other icons. They are positioned relative to a base symbol using predefined CSS classes.

Subscript¶

Subscript glyphs are rendered below the baseline:

O<i class="gf gf-sub check-s"></a>

Rendered result:

O

Superscript¶

Superscript glyphs are rendered above the baseline:

O<i class="gf gf-sup check-s"></a>

Rendered result:

O

Stacking¶

Glyphs can be stacked together using gf-stack class:

<span class="gf-stack gf-2x">
    <i class="gf circle-o"></i>
    <i class="gf gf-ok star-small-s"></i>
</span>

Rendered result: