├── src ├── js │ ├── app.js │ └── landing.js ├── images │ └── icons.png ├── scss │ ├── extensions │ │ ├── _other.scss │ │ ├── _internet.scss │ │ ├── _databases.scss │ │ ├── _fonts.scss │ │ ├── _design.scss │ │ ├── _text.scss │ │ ├── _presentation.scss │ │ ├── _spreadsheet.scss │ │ ├── _compressed.scss │ │ ├── _data.scss │ │ ├── _index.scss │ │ ├── _video.scss │ │ ├── _images.scss │ │ ├── _system.scss │ │ ├── _audio.scss │ │ └── _programming.scss │ ├── _variables.scss │ ├── _rounded.scss │ ├── main.scss │ ├── _config.scss │ ├── _sizes.scss │ ├── _mixins.scss │ ├── _file_icon.scss │ ├── icon.scss │ └── landing.scss └── index.html ├── .babelrc ├── .gitignore ├── postcss.config.js ├── .editorconfig ├── .eslintrc.json ├── .stylelintrc.json ├── SECURITY.md ├── LICENSE ├── webpack.common.config.js ├── package.json ├── webpack.dev.config.js ├── webpack.config.js └── README.md /src/js/app.js: -------------------------------------------------------------------------------- 1 | import '../scss/main.scss'; 2 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | .npmrc 5 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /src/images/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/colorswall/CSS-file-icons/HEAD/src/images/icons.png -------------------------------------------------------------------------------- /src/scss/extensions/_other.scss: -------------------------------------------------------------------------------- 1 | @use "../mixins" as *; 2 | @use "sass:color"; 3 | 4 | @include fi-color('wps', #297eff); 5 | @include fi-color('exe', #0e63ab); 6 | -------------------------------------------------------------------------------- /src/scss/extensions/_internet.scss: -------------------------------------------------------------------------------- 1 | @use "../mixins" as *; 2 | @use "sass:color"; 3 | 4 | @include fi-color('rss', #fd8b33); 5 | @include fi-color('torrent', #55ac44); 6 | -------------------------------------------------------------------------------- /src/scss/extensions/_databases.scss: -------------------------------------------------------------------------------- 1 | @use "../mixins" as *; 2 | @use "sass:color"; 3 | 4 | @include fi-color('sql', #157efb); 5 | @include fi-color('ns', #249c3b, #422c21); 6 | -------------------------------------------------------------------------------- /src/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | $fi_width: 36px; 2 | $fi_height: 46px; 3 | $fi_arrow: 10px; 4 | $fi_color: #007bff; 5 | $fi_text_color: #fff; 6 | $fi_font_size: 13px; 7 | $fi_lh: 1.5; 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 4 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /src/js/landing.js: -------------------------------------------------------------------------------- 1 | import "../scss/landing.scss"; 2 | import "code-prettify/src/prettify"; 3 | import "code-prettify/styles/sunburst.css"; 4 | 5 | document.addEventListener("DOMContentLoaded", () => { 6 | PR.prettyPrint(); 7 | }); 8 | -------------------------------------------------------------------------------- /src/scss/_rounded.scss: -------------------------------------------------------------------------------- 1 | .fi-round { 2 | &-sm.fi { 3 | border-radius: 2px; 4 | overflow: hidden; 5 | } 6 | 7 | &-md.fi { 8 | border-radius: 4px; 9 | overflow: hidden; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/scss/extensions/_fonts.scss: -------------------------------------------------------------------------------- 1 | @use "../mixins" as *; 2 | @use "sass:color"; 3 | 4 | @include fi-color('ttf', #174f57); 5 | @include fi-color('woff', #1b8c73); 6 | @include fi-color('woff2', color.adjust(#1b8c73, $lightness: -5%)); 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/scss/extensions/_design.scss: -------------------------------------------------------------------------------- 1 | @use "../mixins" as *; 2 | @use "sass:color"; 3 | 4 | @include fi-color('3ds', #015051); 5 | @include fi-color('max', color.adjust(#015051, $lightness: 20%)); 6 | @include fi-color('ai', #f67503); 7 | @include fi-color('psd', #181040, #3db6f2); 8 | -------------------------------------------------------------------------------- /src/scss/extensions/_text.scss: -------------------------------------------------------------------------------- 1 | @use "../mixins" as *; 2 | @use "sass:color"; 3 | 4 | @include fi-color('doc', #235d9c); 5 | @include fi-color('docx', #2980b9); 6 | @include fi-color('log', #accff3); 7 | @include fi-color('txt', #8bc6d6); 8 | @include fi-color('pdf', #f88e21); 9 | -------------------------------------------------------------------------------- /src/scss/extensions/_presentation.scss: -------------------------------------------------------------------------------- 1 | @use "../mixins" as *; 2 | @use "sass:color"; 3 | 4 | @include fi-color('ppt', #ce4123); 5 | @include fi-color('pps', color.adjust(#d04626, $lightness: -4%)); 6 | @include fi-color('pptx', color.adjust(#ca4425, $lightness: -7%)); 7 | @include fi-color('odp', #38aef9); 8 | -------------------------------------------------------------------------------- /src/scss/main.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * CSS file icons v0.2.0 (https://colorswall.github.io/CSS-file-icons) 3 | * Copyright 2025 The CSS file icons Authors 4 | * Licensed under MIT 5 | */ 6 | 7 | @use "config" as *; 8 | @use "file_icon"; 9 | @use "icon"; 10 | @use "mixins"; 11 | @use "extensions" as *; 12 | @use "sizes"; 13 | @use "rounded"; 14 | -------------------------------------------------------------------------------- /src/scss/extensions/_spreadsheet.scss: -------------------------------------------------------------------------------- 1 | 2 | @use "../mixins" as *; 3 | @use "sass:color"; 4 | 5 | @include fi-color('xls', #86d44c); 6 | @include fi-color('xlsx', color.adjust(#86d44c, $lightness: -10%)); 7 | @include fi-color('xlsm', color.adjust(#86d44c, $lightness: -15%)); 8 | @include fi-color('ods', color.adjust(#168b3a, $lightness: -15%)); 9 | 10 | -------------------------------------------------------------------------------- /src/scss/extensions/_compressed.scss: -------------------------------------------------------------------------------- 1 | @use "../mixins" as *; 2 | @use "sass:color"; 3 | 4 | @include fi-color('7z', #f63); 5 | @include fi-color('zip', #ffb229); 6 | @include fi-color('rar', #ac3cc1, #1c148a); 7 | @include fi-color('tar-gz', #c6ad86, #665538); 8 | @include fi-color('pkg', #955b2a, #ebc645); 9 | @include fi-color('z', color.adjust(#c6ad86, $lightness: -10%), #665538); 10 | -------------------------------------------------------------------------------- /src/scss/extensions/_data.scss: -------------------------------------------------------------------------------- 1 | @use "../mixins" as *; 2 | @use "sass:color"; 3 | 4 | @include fi-color('csv', #579704); 5 | @include fi-color('dat', #0463ea); 6 | @include fi-color('json', #333333, #aaaaaa); 7 | @include fi-color('xml', #0e886b); 8 | @include fi-color('dat', #8b9c35); 9 | @include fi-color('db', color.adjust(#8b9c35, $lightness: -10%)); 10 | @include fi-color('dbf', #58e6a9); 11 | -------------------------------------------------------------------------------- /src/scss/extensions/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'audio'; 2 | @forward 'compressed'; 3 | @forward 'data'; 4 | @forward 'databases'; 5 | @forward 'design'; 6 | @forward 'fonts'; 7 | @forward 'images'; 8 | @forward 'internet'; 9 | @forward 'presentation'; 10 | @forward 'programming'; 11 | @forward 'spreadsheet'; 12 | @forward 'system'; 13 | @forward 'text'; 14 | @forward 'video'; 15 | @forward 'other'; 16 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "node": true 6 | }, 7 | "extends": "eslint:recommended", 8 | "parserOptions": { 9 | "ecmaVersion": 2018, 10 | "sourceType": "module" 11 | }, 12 | "rules": { 13 | "indent": ["error", 4], 14 | "linebreak-style": ["error", "unix"], 15 | "quotes": ["error", "single"], 16 | "semi": ["error", "always"] 17 | } 18 | } -------------------------------------------------------------------------------- /src/scss/extensions/_video.scss: -------------------------------------------------------------------------------- 1 | @use "../mixins" as *; 2 | @use "sass:color"; 3 | 4 | 5 | @include fi-color('avi', #40c1e6); 6 | @include fi-color('mov', #ff5838); 7 | @include fi-color('mp4', #4163b4); 8 | @include fi-color('wmv', #f76205); 9 | @include fi-color('mpg', #1298d6); 10 | @include fi-color('mpeg', color.adjust(#1298d6, $lightness: -10%)); 11 | @include fi-color('mkv', color.adjust(#1298d6, $lightness: -15%)); 12 | -------------------------------------------------------------------------------- /src/scss/extensions/_images.scss: -------------------------------------------------------------------------------- 1 | @use "../mixins" as *; 2 | @use "sass:color"; 3 | 4 | @include fi-color('png', #dc7460); 5 | @include fi-color('bmp', #459fa0); 6 | @include fi-color('jpg', #0074d0); 7 | @include fi-color('jpeg', color.adjust(#0074d0, $lightness: -5%)); 8 | @include fi-color('gif', #7979ec); 9 | @include fi-color('tif', #ce0258); 10 | @include fi-color('tiff', color.adjust(#ce0258, $lightness: -5%)); 11 | @include fi-color('svg', #e6a420); 12 | -------------------------------------------------------------------------------- /src/scss/_config.scss: -------------------------------------------------------------------------------- 1 | @use "sass:color"; 2 | @use "sass:math"; 3 | 4 | // Variables 5 | $fi_width: 36px; 6 | $fi_height: 46px; 7 | $fi_arrow: 10px; 8 | $fi_color: #007bff; 9 | $fi_text_color: #fff; 10 | $fi_font_size: 13px; 11 | $fi_lh: 1.5; 12 | 13 | // Functions 14 | @function lighten-color($color, $amount) { 15 | @return color.scale($color, $lightness: $amount); 16 | } 17 | 18 | @function darken-color($color, $amount) { 19 | @return color.scale($color, $lightness: -$amount); 20 | } 21 | -------------------------------------------------------------------------------- /src/scss/extensions/_system.scss: -------------------------------------------------------------------------------- 1 | 2 | @use "../mixins" as *; 3 | @use "sass:color"; 4 | 5 | @include fi-color('dll', #960a4a); 6 | @include fi-color('bak', #058bca); 7 | @include fi-color('ini', #0b2955); 8 | @include fi-color('dmp', #1960a2); 9 | @include fi-color('sys', #abe6f1); 10 | @include fi-color('cfg', color.adjust(#abe6f1, $lightness: -10%)); 11 | @include fi-color('tmp', color.adjust(#abe6f1, $lightness: -15%)); 12 | @include fi-color('icns', color.adjust(#abe6f1, $lightness: 2%), #222222); 13 | -------------------------------------------------------------------------------- /src/scss/extensions/_audio.scss: -------------------------------------------------------------------------------- 1 | @use "../mixins" as *; 2 | 3 | @use "sass:color"; 4 | 5 | @include fi-color('mp3', #156aea); 6 | @include fi-color('wav', #36af14); 7 | @include fi-color('aif', #f55f73); 8 | @include fi-color('cda', #1081d1); 9 | @include fi-color('mid', #21c6fc); 10 | @include fi-color('midi', color.adjust(#21c6fc, $lightness: -10%)); 11 | @include fi-color('mpa', #8deef1, #00013a); 12 | @include fi-color('mkv', #ec93d8, #00013a); 13 | @include fi-color('ogg', #576c7b); 14 | @include fi-color('wpa', #214767); 15 | @include fi-color('wpl', #2383f5); 16 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "stylelint-config-standard-scss", 4 | "stylelint-config-standard" 5 | ], 6 | "rules": { 7 | "at-rule-no-unknown": null, 8 | "scss/at-rule-no-unknown": true, 9 | "no-descending-specificity": null, 10 | "selector-class-pattern": null, 11 | "custom-property-pattern": null, 12 | "keyframes-name-pattern": null, 13 | "scss/dollar-variable-pattern": null, 14 | "scss/at-mixin-pattern": null, 15 | "scss/no-global-function-names": null, 16 | "declaration-property-value-no-unknown": null, 17 | "scss/operator-no-unspaced": null, 18 | "scss/operator-no-newline-after": null 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | Use this section to tell people about which versions of your project are 6 | currently being supported with security updates. 7 | 8 | | Version | Supported | 9 | | ------- | ------------------ | 10 | | 5.1.x | :white_check_mark: | 11 | | 5.0.x | :x: | 12 | | 4.0.x | :white_check_mark: | 13 | | < 4.0 | :x: | 14 | 15 | ## Reporting a Vulnerability 16 | 17 | Use this section to tell people how to report a vulnerability. 18 | 19 | Tell them where to go, how often they can expect to get an update on a 20 | reported vulnerability, what to expect if the vulnerability is accepted or 21 | declined, etc. 22 | -------------------------------------------------------------------------------- /src/scss/_sizes.scss: -------------------------------------------------------------------------------- 1 | @use "config" as *; 2 | @use "mixins" as *; 3 | @use "sass:color"; 4 | @use "sass:math"; 5 | 6 | @include fi-size('xs', $fi_width*0.8, $fi_height*0.8, $fi_arrow*0.8, $fi_font_size*0.8); 7 | @include fi-size('sm', $fi_width, $fi_height, $fi_arrow, $fi_font_size); 8 | @include fi-size('md', $fi_width*1.2, $fi_height*1.2, $fi_arrow*1.2, $fi_font_size*1.2); 9 | @include fi-size('lg', $fi_width*1.5, $fi_height*1.5, $fi_arrow*1.5, $fi_font_size*1.5); 10 | @include fi-size('xl', $fi_width*2, $fi_height*2, $fi_arrow*2, $fi_font_size*2); 11 | 12 | .fi { 13 | &-content-xs { 14 | .fi-content { 15 | font-size: 11px; 16 | padding-top: 55%; 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/scss/extensions/_programming.scss: -------------------------------------------------------------------------------- 1 | @use "../mixins" as *; 2 | @use "sass:color"; 3 | 4 | @include fi-color('asp', #5c2d91); 5 | @include fi-color('c', #3747a5); 6 | @include fi-color('cs', #013467); 7 | @include fi-color('java', #ea2c2e); 8 | @include fi-color('jsp', #e5000c, #161419); 9 | @include fi-color('swift', #f32a20); 10 | @include fi-color('php', #4f5b93); 11 | @include fi-color('hh', #505050); 12 | @include fi-color('go', #e0ebf5, #000000); 13 | @include fi-color('py', #3472a3, #ffd542); 14 | @include fi-color('js', #f0db4f, #323330); 15 | @include fi-color('html', #e54c21); 16 | @include fi-color('xhtml', #55a9ef); 17 | @include fi-color('css', #264de4); 18 | @include fi-color('vb', #19aad9); 19 | @include fi-color('rb', #a20d01); 20 | @include fi-color('scss', #bf4080); 21 | @include fi-color('sass', color.adjust(#bf4080, $lightness: -3%)); 22 | @include fi-color('less', #1d365d); 23 | @include fi-color('jsx', #61dafb, #222222); 24 | @include fi-color('sh', #2a3238, #4da925); 25 | @include fi-color('pl', #028fbd); 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 colorswall 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | @use "config" as *; 2 | 3 | @use "sass:color"; 4 | 5 | // File icon Color 6 | @mixin fi-color($class, $color, $text_color:$fi_text_color) { 7 | .fi-#{$class} { 8 | &.fi { 9 | &::before { 10 | background-color: $color; 11 | } 12 | 13 | &::after { 14 | border-left-color: color.adjust($color, $lightness: 13%); 15 | } 16 | 17 | .fi-content { 18 | background-color: $color; 19 | color: $text_color; 20 | } 21 | } 22 | } 23 | } 24 | 25 | // File icon Size 26 | @mixin fi-size($class, $width, $height, $arrow_h, $font_size) { 27 | .fi-size-#{$class} { 28 | &.fi { 29 | width: $width; 30 | height: $height; 31 | padding-top: $arrow_h; 32 | 33 | &::before { 34 | right: $arrow_h; 35 | } 36 | 37 | &::after { 38 | border-top-width: $arrow_h; 39 | border-left-width: $arrow_h; 40 | } 41 | 42 | .fi-content { 43 | top: $arrow_h; 44 | padding-top: #{$height - $font_size * $fi_lh - $arrow_h}; 45 | font-size: $font_size; 46 | } 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/scss/_file_icon.scss: -------------------------------------------------------------------------------- 1 | @use "sass:color"; 2 | @use "config" as *; 3 | 4 | .fi { 5 | width: $fi_width; 6 | height: $fi_height; 7 | padding: $fi_arrow 0 0; 8 | position: relative; 9 | margin: 0 auto; 10 | transition: all 0.2s ease-in-out; 11 | cursor: pointer; 12 | box-sizing: border-box; 13 | font-family: sans-serif; 14 | text-decoration: none; 15 | display: block; 16 | 17 | &::before, 18 | &::after { 19 | position: absolute; 20 | content: ''; 21 | pointer-events: none; 22 | } 23 | 24 | &::before { 25 | top: 0; 26 | height: 100%; 27 | left: 0; 28 | background-color: $fi_color; 29 | right: $fi_arrow; 30 | } 31 | 32 | &::after { 33 | width: 0; 34 | height: 0; 35 | border-style: solid; 36 | border-width: $fi_arrow 0 0 $fi_arrow; 37 | border-color: transparent transparent transparent color.adjust($fi_color, $lightness: 20%); 38 | top: 0; 39 | right: 0; 40 | } 41 | 42 | &:hover:not(.fi-no-hover) { 43 | transform: translate(0, -5px); 44 | } 45 | 46 | &-content { 47 | background-color: $fi_color; 48 | inset: $fi_arrow 0 0 0; 49 | color: $fi_text_color; 50 | padding: #{$fi_height - $fi_font_size * $fi_lh - $fi_arrow} 0.3em 0; 51 | font-size: $fi_font_size; 52 | font-weight: 500; 53 | position: absolute; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /webpack.common.config.js: -------------------------------------------------------------------------------- 1 | const autoprefixer = require('autoprefixer'); 2 | 3 | const entry = { 4 | 'css-file-icons': './src/js/app.js', 5 | 'landing': './src/js/landing.js', 6 | }; 7 | 8 | module.exports = { 9 | entry, 10 | mode: 'development', 11 | target: ['web', 'es5'], 12 | module: { 13 | rules: [{ 14 | test: /\.m?js$/, 15 | exclude: /(node_modules|bower_components)/, 16 | use: { 17 | loader: 'babel-loader', 18 | options: { 19 | presets: ['@babel/preset-env'] 20 | } 21 | } 22 | }, { 23 | test: /\.html$/, 24 | use: { 25 | loader: 'file-loader', 26 | options: { 27 | name: '[name].[ext]' 28 | } 29 | } 30 | }, { 31 | test: /\.(jpe?g|png|gif)$/, 32 | exclude: /(node_modules)/, 33 | use: { 34 | loader: 'url-loader', 35 | options: { 36 | limit: 10000 37 | } 38 | } 39 | }, { 40 | test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 41 | use: { 42 | loader: 'url-loader', 43 | options: { 44 | limit: 10000, 45 | mimetype: 'application/font-woff' 46 | } 47 | } 48 | }, { 49 | test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 50 | use: { 51 | loader: "file-loader" 52 | } 53 | }], 54 | noParse: ["jquery"] 55 | }, 56 | plugins: [ 57 | autoprefixer 58 | ], 59 | }; 60 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-file-icons", 3 | "version": "0.2.0", 4 | "description": "css colors file extension icons", 5 | "style": "build/css-file-icons.css", 6 | "main": "build/css-file-icons.css", 7 | "scripts": { 8 | "dev": "webpack-dev-server --config webpack.dev.config.js", 9 | "build": "webpack --config webpack.config.js", 10 | "postinstall": "opencollective-postinstall", 11 | "lint:style": "stylelint \"src/scss/**/*.scss\"", 12 | "lint:style:fix": "stylelint \"src/scss/**/*.scss\" --fix" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/colorswall/CSS-file-icons.git" 17 | }, 18 | "keywords": [ 19 | "css", 20 | "icons", 21 | "file", 22 | "extension", 23 | "file types", 24 | "colors", 25 | "file icon" 26 | ], 27 | "author": "colorswall", 28 | "license": "MIT", 29 | "bugs": { 30 | "url": "https://github.com/colorswall/CSS-file-icons/issues" 31 | }, 32 | "homepage": "https://colorswall.github.io/CSS-file-icons/", 33 | "devDependencies": { 34 | "@babel/cli": "^7.7.0", 35 | "@babel/core": "^7.7.2", 36 | "@babel/preset-env": "^7.7.1", 37 | "autoprefixer": "^9.7.1", 38 | "babel-loader": "^8.0.6", 39 | "css-loader": "^6.8.1", 40 | "css-minimizer-webpack-plugin": "^7.0.2", 41 | "file-loader": "^6.2.0", 42 | "fs-extra": "^11.2.0", 43 | "mini-css-extract-plugin": "^2.7.6", 44 | "postcss-loader": "^7.3.4", 45 | "postcss-scss": "^4.0.9", 46 | "sass": "^1.89.2", 47 | "sass-loader": "^13.3.3", 48 | "style-loader": "^3.3.3", 49 | "stylelint": "^16.23.0", 50 | "stylelint-config-standard": "^39.0.0", 51 | "stylelint-config-standard-scss": "^15.0.1", 52 | "terser-webpack-plugin": "^5.3.14", 53 | "url-loader": "^4.1.1", 54 | "webpack": "^5.89.0", 55 | "webpack-cli": "^5.1.4", 56 | "webpack-dev-server": "^5.2.1" 57 | }, 58 | "dependencies": { 59 | "code-prettify": "^0.1.0", 60 | "opencollective": "^1.0.3", 61 | "opencollective-postinstall": "^2.0.3" 62 | }, 63 | "collective": { 64 | "type": "opencollective", 65 | "url": "https://opencollective.com/CSS-file-icons" 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/scss/icon.scss: -------------------------------------------------------------------------------- 1 | @use "config" as *; 2 | 3 | // Document Icon 4 | $file_icon_width: 36px; 5 | $file_icon_height: 46px; 6 | $file_icon_arrow: 10px; 7 | $file_icon_color: #007bff; 8 | $file_icon_text_color: #fff; 9 | $file_icon_font_size: 13px; 10 | $file_icon_lh: 1.5; 11 | 12 | .file-icon { 13 | width: $file_icon_width; 14 | height: $file_icon_height; 15 | padding: $file_icon_arrow 0 0; 16 | position: relative; 17 | margin: 0 auto; 18 | transition: all 0.2s ease-in-out; 19 | cursor: pointer; 20 | box-sizing: border-box; 21 | font-family: sans-serif; 22 | 23 | &::before, 24 | &::after { 25 | position: absolute; 26 | content: ""; 27 | pointer-events: none; 28 | } 29 | 30 | &::before { 31 | top: 0; 32 | height: 100%; 33 | left: 0; 34 | background-color: $file_icon_color; 35 | right: $file_icon_arrow; 36 | } 37 | 38 | &::after { 39 | width: 0; 40 | height: 0; 41 | border-style: solid; 42 | border-width: $file_icon_arrow 0 0 $file_icon_arrow; 43 | border-color: transparent transparent transparent lighten-color($file_icon_color, 20%); 44 | top: 0; 45 | right: 0; 46 | } 47 | 48 | &:hover:not(.fi-no-hover) { 49 | transform: translate(0, -5px); 50 | } 51 | 52 | &-content { 53 | background-color: $file_icon_color; 54 | inset: $file_icon_arrow 0 0 0; 55 | color: $file_icon_text_color; 56 | padding: #{$file_icon_height - $file_icon_font_size * $file_icon_lh - 57 | $file_icon_arrow} 0.3em 0; 58 | font-size: $file_icon_font_size; 59 | font-weight: 500; 60 | position: absolute; 61 | } 62 | } 63 | 64 | @mixin file-icon-color($class, $color) { 65 | .extension-#{$class} { 66 | &.file-icon { 67 | &::before { 68 | background-color: $color; 69 | } 70 | 71 | &::after { 72 | border-left-color: lighten-color($color, 20%); 73 | } 74 | 75 | .file-icon-content { 76 | background-color: $color; 77 | } 78 | } 79 | } 80 | } 81 | 82 | @mixin file-icon-size($class, $width, $height, $arrow_h, $font_size) { 83 | .size-#{$class} { 84 | &.file-icon { 85 | width: $width; 86 | height: $height; 87 | padding-top: $arrow_h; 88 | 89 | &::before { 90 | right: $arrow_h; 91 | } 92 | 93 | &::after { 94 | border-top-width: $arrow_h; 95 | border-left-width: $arrow_h; 96 | } 97 | 98 | .file-icon-content { 99 | top: $arrow_h; 100 | padding-top: #{$height - $font_size * $file_icon_lh - $arrow_h}; 101 | font-size: $font_size; 102 | } 103 | } 104 | } 105 | } 106 | 107 | @include file-icon-color("doc", #2c3e50); 108 | @include file-icon-color("docx", #2980b9); 109 | @include file-icon-color("wpd", #e67e22); 110 | @include file-icon-color("html", #e34c26); 111 | @include file-icon-size("md", 36px * 2, 46px * 2, 10px * 2, 13px * 2); 112 | -------------------------------------------------------------------------------- /src/scss/landing.scss: -------------------------------------------------------------------------------- 1 | @use "sass:color"; 2 | 3 | // Landing 4 | @use "config" as *; 5 | 6 | body { 7 | font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; 8 | margin: 0; 9 | padding: 0; 10 | line-height: 1.6; 11 | } 12 | 13 | h1, 14 | h2, 15 | h3, 16 | h4, 17 | h5 { 18 | font-weight: 500; 19 | color: #212121; 20 | padding: 0; 21 | margin: 0.5rem 0 1.5rem; 22 | } 23 | 24 | .fi-list { 25 | font-size: 0; 26 | margin: 0 -10px; 27 | 28 | .fi { 29 | margin: 0 10px 10px; 30 | display: inline-block; 31 | } 32 | } 33 | 34 | .mb { 35 | margin-bottom: 16px; 36 | } 37 | 38 | .container { 39 | width: 720px; 40 | margin: 0 auto; 41 | } 42 | 43 | .btn { 44 | padding: 8px 21px; 45 | display: inline-block; 46 | background-color: #157efb; 47 | color: #fff; 48 | text-decoration: none; 49 | border: 0; 50 | line-height: 1; 51 | vertical-align: top; 52 | transition: background-color 0.2s ease-in-out; 53 | 54 | &:hover { 55 | background-color: color.adjust(#157efb, $lightness: -10%); 56 | color: #fff; 57 | } 58 | } 59 | 60 | section { 61 | padding: 16px 0; 62 | } 63 | 64 | hr { 65 | border: 0; 66 | border-bottom: 1px solid #e7e7e7; 67 | margin: 0.75em 0; 68 | } 69 | 70 | pre.prettyprint { 71 | width: 100%; 72 | } 73 | 74 | .code { 75 | &.prettyprint { 76 | border: 0; 77 | border-radius: 4px; 78 | color: #655d5d; 79 | width: 100%; 80 | } 81 | 82 | &-content { 83 | border-radius: 0; 84 | display: block; 85 | padding: 0; 86 | white-space: pre; 87 | } 88 | } 89 | 90 | .page-content { 91 | padding: 0 0 50px; 92 | } 93 | 94 | .page-header { 95 | background-color: #f4f5f6; 96 | padding: 32px 0; 97 | 98 | .small { 99 | font-size: 13px; 100 | vertical-align: top; 101 | line-height: 31px; 102 | color: #333; 103 | } 104 | 105 | h1 { 106 | color: #157efb; 107 | } 108 | 109 | .btn { 110 | margin-right: 10px; 111 | } 112 | } 113 | 114 | .page-footer { 115 | background-color: #f4f5f6; 116 | padding: 16px 0; 117 | text-align: center; 118 | font-size: 13px; 119 | } 120 | 121 | .mb-3 { 122 | margin-bottom: 30px; 123 | } 124 | 125 | .page-contents { 126 | background-color: #f7fbff; 127 | border: 1px solid color.adjust(#f7fbff, $lightness: -5%); 128 | padding: 0 0 24px; 129 | 130 | h3 { 131 | padding: 0 20px; 132 | } 133 | 134 | a { 135 | text-decoration: none; 136 | } 137 | 138 | .page-nav { 139 | margin: 0; 140 | } 141 | } 142 | 143 | a { 144 | text-decoration: none; 145 | color: #157efb; 146 | 147 | &:hover { 148 | color: color.adjust(#157efb, $lightness: -15%); 149 | } 150 | } 151 | 152 | .sidebar { 153 | position: fixed; 154 | margin: 0 0 0 -240px; 155 | top: 60px; 156 | z-index: 111; 157 | padding: 8px 12px; 158 | background-color: #f7fbff; 159 | border: 1px solid color.adjust(#f7fbff, $lightness: -5%); 160 | width: 180px; 161 | 162 | a { 163 | display: block; 164 | padding: 6px 0; 165 | } 166 | } 167 | -------------------------------------------------------------------------------- /webpack.dev.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const commonConfig = require('./webpack.common.config'); 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4 | 5 | const output = { 6 | path: path.resolve(__dirname, 'build'), 7 | publicPath: '//localhost:3005/build/', 8 | filename: '[name].js' 9 | }; 10 | 11 | const terserOptions = { 12 | format: { 13 | comments: false, 14 | }, 15 | }; 16 | 17 | const TerserPlugin = require('terser-webpack-plugin'); 18 | 19 | const conf = { 20 | ...commonConfig, 21 | output, 22 | optimization: { 23 | minimize: true, 24 | minimizer: [ 25 | new TerserPlugin({ 26 | terserOptions: { 27 | format: { 28 | comments: false, 29 | }, 30 | }, 31 | extractComments: false, 32 | }) 33 | ] 34 | }, 35 | plugins: [ 36 | ...commonConfig.plugins, 37 | new MiniCssExtractPlugin({ 38 | filename: '[name].css', 39 | chunkFilename: '[id].css', 40 | ignoreOrder: false, 41 | }), 42 | ], 43 | devtool: 'source-map', 44 | module: { 45 | rules: commonConfig.module.rules.concat( 46 | { 47 | test: /\.scss$/, 48 | use: [{ 49 | loader: MiniCssExtractPlugin.loader, 50 | options: { 51 | publicPath: output.publicPath 52 | }, 53 | }, 54 | 'css-loader', 55 | 'postcss-loader', 56 | { 57 | loader: 'sass-loader', 58 | options: { 59 | implementation: require('sass'), 60 | warnRuleAsWarning: true, 61 | sassOptions: { 62 | quietDeps: true, 63 | logger: { 64 | warn: function(message, options) { 65 | if (!message.includes('legacy')) { 66 | console.warn(message); 67 | } 68 | } 69 | } 70 | } 71 | } 72 | } 73 | ], 74 | }, 75 | { 76 | test: /\.css$/, 77 | use: [ 78 | { 79 | loader: MiniCssExtractPlugin.loader, 80 | options: { 81 | publicPath: output.publicPath 82 | }, 83 | }, 84 | 'css-loader', 85 | 'postcss-loader' 86 | ], 87 | } 88 | ) 89 | }, 90 | devServer: { 91 | historyApiFallback: true, 92 | static: { 93 | directory: path.join(__dirname, 'src') 94 | }, 95 | port: 3005, 96 | hot: true 97 | } 98 | } 99 | 100 | module.exports = conf; 101 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const commonConfig = require('./webpack.common.config'); 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4 | const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); 5 | 6 | const output = { 7 | path: path.resolve(__dirname, 'build'), 8 | publicPath: './', 9 | filename: '[name].js' 10 | }; 11 | 12 | const terserOptions = { 13 | format: { 14 | comments: false, 15 | }, 16 | }; 17 | 18 | const TerserPlugin = require('terser-webpack-plugin'); 19 | 20 | const conf = Object.assign(commonConfig, { 21 | output, 22 | plugins: [ 23 | ...commonConfig.plugins, 24 | new MiniCssExtractPlugin({ 25 | filename: '[name].css', 26 | chunkFilename: '[id].css', 27 | ignoreOrder: false, 28 | }), 29 | ], 30 | module: { 31 | rules: commonConfig.module.rules.concat( 32 | { 33 | test: /\.scss$/, 34 | use: [{ 35 | loader: MiniCssExtractPlugin.loader, 36 | options: { 37 | publicPath: output.publicPath 38 | }, 39 | }, 40 | 'css-loader', 41 | 'postcss-loader', 42 | { 43 | loader: 'sass-loader', 44 | options: { 45 | implementation: require('sass'), 46 | warnRuleAsWarning: true, 47 | sassOptions: { 48 | outputStyle: 'compressed', 49 | quietDeps: true, 50 | logger: { 51 | warn: function(message, options) { 52 | if (!message.includes('legacy')) { 53 | console.warn(message); 54 | } 55 | } 56 | } 57 | } 58 | } 59 | } 60 | ], 61 | }, 62 | { 63 | test: /\.css$/, 64 | use: [ 65 | { 66 | loader: MiniCssExtractPlugin.loader, 67 | options: { 68 | publicPath: output.publicPath 69 | }, 70 | }, 71 | 'css-loader', 72 | 'postcss-loader' 73 | ], 74 | } 75 | ) 76 | }, 77 | optimization: { 78 | concatenateModules: true, 79 | minimize: true, 80 | minimizer: [ 81 | new TerserPlugin({ 82 | terserOptions: { 83 | format: { 84 | comments: false, 85 | }, 86 | }, 87 | extractComments: false, 88 | }), 89 | new CssMinimizerPlugin({ 90 | minimizerOptions: { 91 | preset: [ 92 | 'default', 93 | { 94 | discardComments: { removeAll: true }, 95 | }, 96 | ], 97 | }, 98 | }), 99 | ], 100 | }, 101 | }); 102 | 103 | module.exports = conf; 104 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## CSS file icons 2 | [![Backers on Open Collective](https://opencollective.com/CSS-file-icons/backers/badge.svg)](#backers) 3 | [![Sponsors on Open Collective](https://opencollective.com/CSS-file-icons/sponsors/badge.svg)](#sponsors) 4 | 5 | Pure CSS file icons for popular extensions lightweight css library 6 | 7 | ## Icons 8 | [CSS file icons](https://colorswall.github.io/CSS-file-icons/) 9 | 10 | [Demo](https://colorswall.github.io/CSS-file-icons/) 11 | 12 | ## Usage 13 | Include `css-file-icons.css` to html or install via npm 14 | ``` 15 | npm i css-file-icons --save 16 | ``` 17 | include css file `css-file-icons.css` from folder `build` 18 | 19 | ## Example 20 | ```html 21 |
22 |
doc
23 |
24 | ``` 25 | 26 | ## File extensions 27 | mp3, wav, aif, cda, mid, midi, mpa, mkv, ogg, wpa, wpl, 28 | 7z, zip, rar, tar.gz, pkg, z, 29 | csv, dat, json, xml, dat, db, dbf, 30 | sql, ns, 31 | 3ds, max, ai, psd, 32 | ttf, woff, woff2, 33 | png, bmp, jpg, jpeg, gif, tif, tiff, svg, 34 | rss, torrent, 35 | ppt, pps, pptx, odp, 36 | asp, c, cs, java, jsp, swift, php, hh, go, py, js, html, xhtml, css, vb, rb, scss, sass, less, jsx, sh, pl, 37 | xls, xlsx, xlsm, ods, 38 | dll, bak, ini, dmp, sys, cfg, tmp, icns, 39 | doc, docx, log, txt, pdf, 40 | avi, mov, mp4, mpg, mpeg, mkv, wmv, 41 | wps, exe. 42 | 43 | ```css 44 | .fi.fi-*extension* 45 | /* 46 | where *extension* = file extension. 47 | example: .fi.fi-doc 48 | */ 49 | ``` 50 | 51 | ## Sizes 52 | ```css 53 | .fi.fi-size-xs 54 | .fi.fi-size-sm // default 55 | .fi.fi-size-md 56 | .fi.fi-size-lg 57 | .fi.fi-size-xl 58 | ``` 59 | ## Rounded 60 | sm, md 61 | default border radius 0 62 | ```scss 63 | .fi-round-sm 64 | .fi-round-md 65 | ``` 66 | ## SCSS Mixins 67 | #### New icon color 68 | ```scss 69 | @mixin fi-color($class, $color, $text_color:$file_icon_text_color) 70 | ``` 71 | #### Icon size 72 | ```scss 73 | @mixin fi-size($class, $width, $height, $arrow_h, $font_size) 74 | ``` 75 | 76 | ## Contributors 77 | 78 | This project exists thanks to all the people who contribute. 79 | 80 | 81 | ## Browsers support 82 | `CSS file icons` supports all modern browsers (Chrome, Firefox, Opera and Internet Exploer >= 9) 83 | 84 | ## Backers 85 | 86 | Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/CSS-file-icons#backer)] 87 | 88 | 89 | 90 | ## Sponsors 91 | 92 | 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)] 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | Created by [ColorsWall](https://colorswall.com/) 106 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS file icons - pure CSS file icons for most popular file extensions and file types. 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |

CSS file icons 0.2.0

16 |
17 | Pure CSS file icons for most popular file extensions and file types. 18 |
19 |
20 | GitHub 21 | Star 22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |

How to use

30 |

Donwload css-file-icons or install via npm

31 | 
npm install css-file-icons --save
32 |

33 | Include css-file-icons.css
34 | Inside html insert block with class fi: 35 |

36 | 
<div class="fi fi-doc">
 37 |     <div class="fi-content">doc</div>
 38 | </div>
39 | To change icon color change class name. For example for EXE file class name fi-exe 40 | 
<div class="fi fi-exe">
41 |
42 | 47 |
48 |
49 |

File extensions categories

50 | 67 |
68 |
69 |

Audio

70 |
71 |
72 |
mp3
73 |
74 |
75 |
wav
76 |
77 |
78 |
aif
79 |
80 |
81 |
cda
82 |
83 |
84 |
mid
85 |
86 |
87 |
midi
88 |
89 |
90 |
mpa
91 |
92 |
93 |
mkv
94 |
95 |
96 |
ogg
97 |
98 |
99 |
wpa
100 |
101 |
102 |
wpl
103 |
104 |
105 |
106 |
107 |

Compressed

108 |
109 |
110 |
7z
111 |
112 |
113 |
zip
114 |
115 |
116 |
rar
117 |
118 |
119 |
tar.gz
120 |
121 |
122 |
pkg
123 |
124 |
125 |
z
126 |
127 |
128 |
129 |
130 |

Data

131 |
132 |
133 |
csv
134 |
135 |
136 |
dat
137 |
138 |
139 |
json
140 |
141 |
142 |
xml
143 |
144 |
145 |
dat
146 |
147 |
148 |
db
149 |
150 |
151 |
dbf
152 |
153 |
154 |
155 |
156 |

Databases

157 |
158 |
159 |
sql
160 |
161 |
162 |
ns
163 |
164 |
165 |
166 |
167 |

Design

168 |
169 |
170 |
3ds
171 |
172 |
173 |
max
174 |
175 |
176 |
ai
177 |
178 |
179 |
psd
180 |
181 |
182 |
183 |
184 |

Fonts

185 |
186 |
187 |
ttf
188 |
189 |
190 |
woff
191 |
192 |
193 |
woff2
194 |
195 |
196 |
197 |
198 |

Images

199 |
200 |
201 |
png
202 |
203 |
204 |
bmp
205 |
206 |
207 |
jpg
208 |
209 |
210 |
jpeg
211 |
212 |
213 |
gif
214 |
215 |
216 |
tif
217 |
218 |
219 |
tiff
220 |
221 |
222 |
svg
223 |
224 |
225 |
226 |
227 |

Internet

228 |
229 |
230 |
rss
231 |
232 |
233 |
torrent
234 |
235 |
236 |
237 |
238 |

Presentation

239 |
240 |
241 |
ppt
242 |
243 |
244 |
pps
245 |
246 |
247 |
pptx
248 |
249 |
250 |
odp
251 |
252 |
253 |
254 |
255 |

Programming Languages

256 |
257 |
258 |
asp
259 |
260 |
261 |
c
262 |
263 |
264 |
cs
265 |
266 |
267 |
java
268 |
269 |
270 |
jsp
271 |
272 |
273 |
swift
274 |
275 |
276 |
php
277 |
278 |
279 |
hh
280 |
281 |
282 |
go
283 |
284 |
285 |
py
286 |
287 |
288 |
js
289 |
290 |
291 |
html
292 |
293 |
294 |
xhtml
295 |
296 |
297 |
css
298 |
299 |
300 |
vb
301 |
302 |
303 |
rb
304 |
305 |
306 |
scss
307 |
308 |
309 |
sass
310 |
311 |
312 |
less
313 |
314 |
315 |
jsx
316 |
317 |
318 |
sh
319 |
320 |
321 |
pl
322 |
323 |
324 |
325 |
326 |

Spreadsheet

327 |
328 |
329 |
xls
330 |
331 |
332 |
xlsx
333 |
334 |
335 |
xlsm
336 |
337 |
338 |
ods
339 |
340 |
341 |
342 |
343 |

System

344 |
345 |
346 |
dll
347 |
348 |
349 |
bak
350 |
351 |
352 |
ini
353 |
354 |
355 |
dmp
356 |
357 |
358 |
sys
359 |
360 |
361 |
cfg
362 |
363 |
364 |
tmp
365 |
366 |
367 |
icns
368 |
369 |
370 |
371 |
372 |

Text

373 |
374 |
375 |
doc
376 |
377 |
378 |
docx
379 |
380 |
381 |
log
382 |
383 |
384 |
txt
385 |
386 |
387 |
pdf
388 |
389 |
390 |
391 |
392 |

Video

393 |
394 |
395 |
avi
396 |
397 |
398 |
mov
399 |
400 |
401 |
mp4
402 |
403 |
404 |
mpg
405 |
406 |
407 |
mpeg
408 |
409 |
410 |
mkv
411 |
412 |
413 |
wmv
414 |
415 |
416 |
417 |
418 |

Other

419 |
420 |
421 |
wps
422 |
423 |
424 |
exe
425 |
426 |
427 |
428 |
429 |
430 |
431 |

432 | File extensions 433 |

434 | Icons for file types: 435 |
436 | mp3, wav, aif, cda, mid, midi, mpa, mkv, ogg, wpa, wpl, 437 | 7z, zip, rar, tar.gz, pkg, z, 438 | csv, dat, json, xml, dat, db, dbf, 439 | sql, ns, 440 | 3ds, max, ai, psd, 441 | ttf, woff, woff2, 442 | png, bmp, jpg, jpeg, gif, tif, tiff, svg, 443 | rss, torrent, 444 | ppt, pps, pptx, odp, 445 | asp, c, cs, java, jsp, swift, php, hh, go, py, js, html, xhtml, css, vb, rb, scss, sass, less, jsx, sh, pl, 446 | xls, xlsx, xlsm, ods, 447 | dll, bak, ini, dmp, sys, cfg, tmp, icns, 448 | doc, docx, log, txt, pdf, 449 | avi, mov, mp4, mpg, mpeg, mkv, wmv, 450 | wps, exe. 451 |
452 |
453 |
454 |

Customization

455 |
456 |

Sizes

457 |
458 | xs, sm, md, lg, xl 459 |
460 | 
.fi.fi-size-xs
461 | .fi.fi-size-sm // default
462 | .fi.fi-size-md
463 | .fi.fi-size-lg
464 | .fi.fi-size-xl
465 |
466 |
467 |
468 | doc 469 |
470 |
471 |
472 |
473 | 7z 474 |
475 |
476 |
477 |
478 | csv 479 |
480 |
481 |
482 |
483 | pdf 484 |
485 |
486 |
487 |
488 | wpd 489 |
490 |
491 |
492 |
493 |
494 |

Rounded

495 |
496 | sm, md 497 | default border radius 0 498 |
499 | 
.fi-round-sm
500 | .fi-round-md
501 |
502 |
503 |
504 |
505 | psd 506 |
507 |
508 |
509 |
510 | js 511 |
512 |
513 |
514 |
515 |
516 |

No hover animation

517 | 
.fi-no-hover
518 |
519 |
520 |
docx
521 |
522 |
523 |
xlsx
524 |
525 |
526 |
527 |
528 | 529 |
530 | 533 | 534 | 535 | 536 | 537 | 538 | --------------------------------------------------------------------------------