Most Popular File Extensions and File Types Icons | CSS-file-icons

Pure CSS file icons for most popular file extensions/types. CSS file icons are a CSS/SCSS library used to create file sort and extension icons utilizing Cascading Style Sheets.

document type icons, different types of files have different icons, file type icons windows 10, file type icons svg free, material file type icons, file type icons font awesome

Icons for file types:

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.

How to make use of it:

Download and include the compiled CSS file css-file-icons.css on the web page.

<link rel="stylesheet" href="build/css-file-icons.css">

Add the CSS class fi and an extension class of your option to the DIV component as follows:

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

<div class="fi fi-docx">
  <div class="fi-content">Word</div>
</div>

Adjust the size of the file icons with the next classes:

  • .fi.fi-size-xs: additional small
  • .fi.fi-size-sm: default
  • .fi.fi-size-md: center dimension
  • .fi.fi-size-lg: massive
  • .fi.fi-size-xl: additional massive
<div class="fi fi-doc fi-size-lg">
  <div class="File" type="" extension="" icons="" in="" pure="" css"fi-content"="">Word</div>
</div>

File Type/Extension Icons In Pure CSS, Customizable File Folder Icons, CSS File Icons Github, file icon vectors


See Demo And Download

Official Website(colorswall): Click Here

This superior jQuery/javascript plugin is developed by colorswall. For extra Advanced Usage, please go to the official website.

Share