PICOL Icon Font

The PICOL Icon Font enables you to easily use the PICOL Icons as vector icons on your website via CSS or in your favorite Desktop-Publishing Tool.

The package contains the font as TTF, SVG, WOFF and EOT. It also includes the CSS and a demo HTML-file with all icons with their CSS class names.

The font was compiled by Alessandro Gubitosi with fontello.

How to use the PICOL Icon fonts on your website


Step 1: Download the font package.

Download the font package from GitHub and extract it on your harddisk.

Step 2: Copy the files to your root-folder.

If you already have a CSS-folder copy the files in the folder, otherwise you can copy the whole CSS-folder. Be careful not to overwrite your CSS-files.

Step 3: Register the picol.css in your website

Add the following code to you header. <link rel="stylesheet" type="text/css" href="css/picol.css"> The font is registered in the picol.css file with the method @font-face. If you wish to put the fonts to another location, you have to change the path in the file css/picol.css.

Step 4: Use the icons

You can use the icon by with <i class="picol_icon_name"></i> You can find the icon names in the included demo.html.

For example the code <i class="picol_cloud"></i> would look like this

Step 5: Customizing your icons.

You can customize the size, color and many other attributes by assigning CSS attributes to it.
For example the CSS attributes
font-size: 128px;
color: #F06446;
text-shadow: 0 5px 10px #969696;
on the cloud icon would look like this.