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

Category: CSS & CSS3 , Recommended | January 10, 2021
Author:colorswall
Views Total:450 views
Official Page:Go to website
Last Update:January 10, 2021
License:MIT

Preview:

95 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. mp3
  2. wav
  3. aif
  4. cda
  5. mid
  6. midi
  7. mpa
  8. mkv
  9. ogg
  10. wpa
  11. wpl
  12. 7z
  13. zip
  14. rar
  15. tar.gz
  16. pkg
  17. z
  18. csv
  19. dat
  20. json
  21. xml
  22. dat
  23. db
  24. dbf
  25. sql
  26. ns
  27. 3ds
  28. max
  29. ai
  30. psd
  31. ttf
  32. woff
  33. woff2
  34. png
  35. bmp
  36. jpg
  37. jpeg
  38. gif
  39. tif
  40. tiff
  41. svg
  42. rss
  43. torrent
  44. ppt
  45. pps
  46. pptx
  47. odp
  48. asp
  49. c
  50. cs
  51. java
  52. jsp
  53. swift
  54. php
  55. hh
  56. go
  57. py
  58. js
  59. html
  60. xhtml
  61. css
  62. vb
  63. rb
  64. scss
  65. sass
  66. less
  67. jsx
  68. sh
  69. pl
  70. xls
  71. xlsx
  72. xlsm
  73. ods
  74. dll
  75. bak
  76. ini
  77. dmp
  78. sys
  79. cfg
  80. tmp
  81. icns
  82. doc
  83. docx
  84. log
  85. txt
  86. pdf
  87. avi
  88. mov
  89. mp4
  90. mpg
  91. mpeg
  92. mkv
  93. wmv
  94. wps
  95. exe

How to use it:

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

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

2. 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>

3. 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>

4. Set the radius of the icon border.

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

Changelog:

01/10/2021

  • v0.1.2: added `.fi-no-hover`

08/31/2020

  • v0.1.0

01/14/2018

  • v0.0.7

11/25/2018

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

You Might Be Interested In:


Leave a Reply