45 File Type/Extension Icons In Pure CSS – CSS file icons

Category: CSS & CSS3 , Recommended | November 25, 2018
Author: colorswall
Views Total: 119
Official Page: Go to website
Last Update: November 25, 2018
License: MIT

Preview:

45 File Type/Extension Icons In Pure CSS – CSS file icons

Description:

CSS file icons is a CSS/SCSS library used to create file type and extension icons using pure CSS.

Icons included:

  1. doc
  2. docx
  3. log
  4. txt
  5. wps
  6. csv
  7. dat
  8. ppt
  9. xml
  10. mp3
  11. wav
  12. avi
  13. mov
  14. mp4
  15. 3ds
  16. max
  17. gif
  18. ai
  19. svg
  20. pdf
  21. xls
  22. xlsx
  23. sql
  24. exe
  25. js
  26. html
  27. xhtml
  28. css
  29. asp
  30. ttf
  31. dll
  32. 7z
  33. zip
  34. c
  35. cs
  36. java
  37. swift
  38. torrent
  39. php
  40. hh
  41. go
  42. py
  43. rss
  44. rb
  45. any

How to use it:

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

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

Add the CSS class fi and an extension class of your choice to the DIV element 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 following classes:

  • .fi.fi-size-xs: extra small
  • .fi.fi-size-sm: default
  • .fi.fi-size-md: middle size
  • .fi.fi-size-lg: large
  • .fi.fi-size-xl: extra large
<div class="fi fi-doc fi-size-lg">
  <div class="fi-content">Word</div>
</div>

Changelog:

11/25/2018

  • add colors for .psd, .png, .bmp, .png, .bmp, .vb

You Might Be Interested In:

Leave a Reply