ravlissimo / awesome-css-files-icons Goto Github PK

Pure CSS file icons for popular extensions lightweight css library

Demo

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

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

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
*/

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

sm, md default border radius 0

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

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

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

This project exists thanks to all the people who contribute.

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

CSS File Icons WP

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

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

Created by ColorsWall