Quick start guide

Friconix is a collection of free vector icons designed to be easily embed on web page thank to our CDN (Content Delivery Network).

 

# Get Friconix on your website

To embed Friconix into a webpage, copy-paste one of these codes into the <head> section of your HTML document:

Always up-to-date version (recommended):

<script defer src="https://friconix.com/cdn/friconix.js"></script>

Current version (advanced):

<script defer src="https://friconix.com/cdn/friconix-0.708.js"></script>

The file https://friconix.com/cdn/version.txt contains the current version. It may be usefull to force client to reload the last version after updates.

 

# Display icons

Use the HTML <i> tag to display an icon. The name and paramters of the icon are included in the class as on the following:

<i class="fi-parameters-iconname"></i>

The following example display a solid question mark in an octagon:

<i class="fi-hwsuxl-question-mark"></i>

When icons are displayed dynamically, rendering can be forced by calling the JavaScript function friconix_update();

 

# Parameters

The icon class is composed of 6 parameters, each encoded with one character:

  1. Shape of the icon (square, triangle, octagon ...)
  2. Thickness of the icon (thin, normal or wide)
  3. Style of the icon (line, solid or prohibited)
  4. Direction of the icon (up, right, down or left)
  5. Effect (mirroring, spin, pulse)
  6. Size of the icon (small, medium, large, 2x, 4x ...)

Friconix parameters and icons. Start guide.

Note that all combinations are not possible. The following examples are non-working icons:

 

# Shape

Each icon can be combined with one of the following shape:

The shape can be overwritten by the following classes:

Parameter Class Description
tfi-triangletriangle
efi-equilateralequilateral triangle
cfi-circlecircle
sfi-squaresquare
hfi-hexagonhexagon
ofi-octagonoctagon
xfi-no-shapeno shape
 

# Thickness

When an icon is combined with a shape, the thickness of the shape can be customized:

The thickness can be overwritten by the following classes:

Parameter Class Description Width
tfi-thinthin5% of icon width
nfi-normalnormal10% of icon width
wfi-widewide15% of icon width
xfi-no-thicknessremove thickness (same as fi-thin)5% of icon width
 

# Style

Following style are available:

The style can be overwritten by the following classes:

Parameter Class Description
ufi-lineonly the ouline of the shape is drawn
rfi-solidthe shape is filled
dfi-prohibitedOnly the outline is drawn, but the icon is crossed out
xfi-no-styleremove any style (same as fi-solid)
 

# Direction

Each icon can be rotated in a direction with a step of 90°:

The direction can be overwritten by the following classes:

Parameter Class Description
ufi-upinitial position
rfi-rightrotate 90° degree CW
dfi-downrotate 180°
lfi-leftrotate 90° CCW (or spin/pulse CCW)
xfi-no-directionremove any rotation (same as fi-up)
 

# Effect

Following effects are available:

By setting the direction to left, the icon rotates counterclockwise:

The effect can be overwritten by the following classes:

Parameter Class Description
hfi-flip-hflip horizontaly
vfi-flip-vflip verticaly
sfi-spinrotate the icon (2 seconds per revolution)
pfi-pulserotate the icon with 8 steps (2 seconds per revolution)
xfi-no-effectremove any effect
 

# Size

The last parameter set icon size:

The size can be overwritten by the following classes:

Parameter Class Description CSS
tfi-size-xsextra-small or tiny0.3 em
tfi-size-tinyextra-small or tiny0.3 em
sfi-size-ssmall0.5 em
mfi-size-mmedium1 em
lfi-size-llarge1.33 em
xfi-size-xlextra-large1.66 em
hfi-size-xxlhuge10 cm
hfi-size-hhuge10 cm
2fi-2x2x2 em
3fi-3x3x3 em
3fi-4x4x4 em
..........
9fi-9x9x9 em
# ID Query URL Count
0 1 script friconix https://friconix.com/start 1