Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/colorswall/CSS-file-icons
Pure CSS icons for popular file extensions
https://github.com/colorswall/CSS-file-icons
Last synced: 22 days ago
JSON representation
Pure CSS icons for popular file extensions
- Host: GitHub
- URL: https://github.com/colorswall/CSS-file-icons
- Owner: colorswall
- Created: 2018-11-13T22:08:46.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-05T01:21:41.000Z (9 months ago)
- Last Synced: 2024-04-13T16:35:45.403Z (2 months ago)
- Language: HTML
- Homepage: https://colorswall.github.io/CSS-file-icons/
- Size: 2.46 MB
- Stars: 317
- Watchers: 4
- Forks: 40
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Security: SECURITY.md
Lists
- awesome-css-only - CSS-file-icons - Pure CSS icons for popular file extensions. (Uncategorized / Uncategorized)
- awesome-stars - CSS-file-icons - Pure CSS icons for popular file extensions (HTML)
README
## CSS file icons
[](#backers)
[](#sponsors)
Pure CSS file icons for popular extensions lightweight css library
## Icons
[
](https://colorswall.github.io/CSS-file-icons/)
[Demo](https://colorswall.github.io/CSS-file-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
```html
doc
```
## 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.
```css
.fi.fi-*extension*
/*
where *extension* = file extension.
example: .fi.fi-doc
*/
```
## Sizes
```css
.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
```scss
.fi-round-sm
.fi-round-md
```
## SCSS Mixins
#### New icon color
```scss
@mixin fi-color($class, $color, $text_color:$file_icon_text_color)
```
#### Icon size
```scss
@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](https://github.com/colorswall/CSS-file-icons-wp)
## Backers
Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/CSS-file-icons#backer)]
## Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/CSS-file-icons#sponsor)]
Created by [ColorsWall](https://colorswall.com/)