Bhanditz / CSS-file-icons

Pure CSS icons for popular file extensions

CSS file icons

Pure CSS file icons for popular extensions

Icons

demo

Usage

Include css-file-icons.css to html or install via npm

npm i css-file-icons --save

include css file css-file-icons.css from folder build

Example

<div class="fi fi-doc">
    <div class="fi-content">doc</div>
</div>

File extensions

Icons for files doc, docx, log, txt, wps, csv, dat, ppt, xml, mp3, wav, avi, mov, mp4, 3ds, max, gif, ai, svg, pdf, xls, xlsx, sql, exe, js, html, xhtml, css, asp, ttf, dll, 7z, zip, c, cs, java, swift, torrent, php, hh, go, py, rss, rb.

.fi.fi-*extension*
// where *extension* = file extension.
// example: .fi.fi-doc

Sponsors

The following wonderful companies have sponsored CSS file icons

Learn more about becoming a sponsor!

Sizes

.fi.fi-size-sm // default
.fi.fi-size-md
.fi.fi-size-lg
.fi.fi-size-x

SCSS Mixins

New icon color

@mixin fi-color($class, $color, $text_color:$file_icon_text_color)

Icon size

@mixin fi-size($class, $width, $height, $arrow_h, $font_size)