CSS-file-icons: An HTML repository from ramiy

CSS file icons

Pure CSS file icons for popular extensions lightweight css library

Icons

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

mp3, wav, aif, cda, mid, midi, mpa, mkv, ogg, wpa, wpl, 7z, zip, rar, tar.gz, pkg, z, csv, dat, json, xml, dat, db, dbf, sql, ns, 3ds, max, ai, psd, ttf, woff, woff2, png, bmp, jpg, jpeg, gif, tif, tiff, svg, rss, torrent, ppt, pps, pptx, odp, asp, c, cs, java, jsp, swift, php, hh, go, py, js, html, xhtml, css, vb, rb, scss, sass, less, jsx, sh, pl, xls, xlsx, xlsm, ods, dll, bak, ini, dmp, sys, cfg, tmp, icns, doc, docx, log, txt, pdf, avi, mov, mp4, mpg, mpeg, mkv, wmv, wps, exe.

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

Sizes

.fi.fi-size-xs
.fi.fi-size-sm // default
.fi.fi-size-md
.fi.fi-size-lg
.fi.fi-size-xl

Rounded

sm, md default border radius 0

.fi-round-sm
.fi-round-md

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)

Contributors

This project exists thanks to all the people who contribute.

Browsers support

CSS file icons supports all modern browsers (Chrome, Firefox, Opera and Internet Exploer >= 9)

Wordpress version

CSS File Icons WP

Backers

Thank you to all our backers! 🙏 [Become a backer]

ramiy/CSS-file-icons