Quick start guide
Friconix is a collection of free vector icons designed to be easily embed on web pages thanks to our CDN (Content Delivery Network).
- Get Friconix on your website
- Display icons
- Parameters
- Shape
- Thickness
- Style
- Direction
- Effect
- Size
- Color
# 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):
Current version (advanced):
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:
The following example displays a solid question mark in an octagon:
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:
- Shape of the icon (square, triangle, octagon ...)
- Thickness of the icon (thin, normal or wide)
- Style of the icon (line, solid or prohibited)
- Direction of the icon (up, right, down or left)
- Effect (mirroring, spin, pulse)
- Size of the icon (small, medium, large, 2x, 4x ...)
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 |
|---|---|---|
| t | fi-triangle | triangle |
| e | fi-equilateral | equilateral triangle |
| c | fi-circle | circle |
| s | fi-square | square |
| h | fi-hexagon | hexagon |
| o | fi-octagon | octagon |
| x | fi-no-shape | no 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 |
|---|---|---|---|
| t | fi-thin | thin | 5% of icon width |
| n | fi-normal | normal | 10% of icon width |
| w | fi-wide | wide | 15% of icon width |
| x | fi-no-thickness | remove 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 |
|---|---|---|
| u | fi-line | only the ouline of the shape is drawn |
| r | fi-solid | the shape is filled |
| d | fi-prohibited | Only the outline is drawn, but the icon is crossed out |
| x | fi-no-style | remove 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 |
|---|---|---|
| u | fi-up | initial position |
| r | fi-right | rotate 90° degree CW |
| d | fi-down | rotate 180° |
| l | fi-left | rotate 90° CCW (or spin/pulse CCW) |
| x | fi-no-direction | remove 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 |
|---|---|---|
| h | fi-flip-h | flip horizontaly |
| v | fi-flip-v | flip verticaly |
| s | fi-spin | rotate the icon (2 seconds per revolution) |
| p | fi-pulse | rotate the icon with 8 steps (2 seconds per revolution) |
| x | fi-no-effect | remove any effect |
# Size
The last parameter set icon size:The size can be overwritten by the following classes:
| Parameter | Class | Description | CSS |
|---|---|---|---|
| t | fi-size-xs | extra-small or tiny | 0.3 em |
| t | fi-size-tiny | extra-small or tiny | 0.3 em |
| s | fi-size-s | small | 0.5 em |
| m | fi-size-m | medium | 1 em |
| l | fi-size-l | large | 1.33 em |
| x | fi-size-xl | extra-large | 1.66 em |
| h | fi-size-xxl | huge | 10 cm |
| h | fi-size-h | huge | 10 cm |
| 2 | fi-2x | 2x | 2 em |
| 3 | fi-3x | 3x | 3 em |
| 3 | fi-4x | 4x | 4 em |
| ... | ... | .. | .. |
| 9 | fi-9x | 9x | 9 em |
# Color
Icons are designed to be embedded in HTML files. The best option to change icon color is to apply a CSS style :
- This JSFiddle shows an example of CSS color styling.
- A full list of CSS color names is available on this page.
| # | ID | Query | URL | Count |
|---|---|---|---|---|
| 0 | 274 | how to put css properties in your web with friconix | https://friconix.com/start | 1 |
| 1 | 96 | site:friconix.com | https://friconix.com/start | 23 |
| 2 | 63 | https://friconix.com/start/ | https://friconix.com/start | 30 |
| 3 | 48 | "https://friconix.com/cdn/friconix-0.1357.js | https://friconix.com/start | 1 |
| 4 | 7 | Friconix | https://friconix.com/start | 7 |
| 5 | 1 | script friconix | https://friconix.com/start | 1 |