Installation¶

npm¶

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

npm install @gufo-labs/font

@todo: Add CSS @todo: CDN

todo: Archive¶

Using Stencils¶

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

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

Where:

gf - Enables Gufo Font.
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-unknown cisco-router"></i>

Rendered result:

gf-ok¶

Indicates the node is up and operational.

Example:

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

Rendered result:

gf-warn¶

Indicates the node has active alarms or warnings.

Example:

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

Rendered result:

gf-fail¶

Marks the node as in a critical failure state.

Example:

<i class="gf gf-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¶

Default network node size is 64x64px. You can adjust it using "scale classes".

Default¶

Default size (64x64px). Rendered result:

gf-2x¶

Doubles icon size.

Example:

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

Rendered result:

gf-3x¶

Triples icon size.

Example:

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

Rendered result:

Exact sizes¶

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

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

Rotation¶

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

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

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">
    <i class="gf rectangle-o"></i>
    <i class="gf gf-ok star-small-s"></i>
</span>

Rendered result: