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

Preview:

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