FileIcon

Generates icons for files based on their file type.

Colours files based on their use. Archives are grey, Images are mustard, etc.

Usage

Include fileicon.css in your web project with

<link rel="stylesheet" href="/fileicon/fileicon.css">

Follow the examples below to create some icons.

Examples

JPG file (extra large)

<div class="file-icon file-icon-xl" data-type="jpg"></div>

MP3 file (large)

<div class="file-icon file-icon-lg" data-type="mp3"></div>

JSON file (normal)

<div class="file-icon" data-type="json"></div>

WEBM file (small)

<div class="file-icon file-icon-sm" data-type="webm"></div>

DOCX file (extra small)

Text is not rendered in XS mode.

<div class="file-icon file-icon-xs" data-type="docx"></div>

Hiding the white corner

If your website doesn't have a white background, you'll want to change the corner colour using a simple CSS rule for your website;

.file-icon::before{
  border-color: #color #color rgba(255,255,255,.35) rgba(255,255,255,.35);
}