CSS圖標代表什么文件

代碼中的圖標在視覺上起到很好的輔助作用，能夠讓用戶更快地了解文件類型。CSS中有很多預制的圖標，下面是一些常用的文件類型的圖標。        
/* 圖標樣式 */
/* 圖標樣式參考 =>FontAwesome */
@font-face {
font-family: 'FontAwesome';
src: url('../webfonts/fa-solid-900.eot');
src: url('../webfonts/fa-solid-900.eot?#iefix') format('embedded-opentype'),
url('../webfonts/fa-solid-900.woff2') format('woff2'),
url('../webfonts/fa-solid-900.woff') format('woff'),
url('../webfonts/fa-solid-900.ttf') format('truetype'),
url('../webfonts/fa-solid-900.svg#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
/* 文件類型圖標 */
/* Word */
.doc:before,
.docx:before {
content: "\f1c2";
font-family: FontAwesome;
font-weight: normal;
}
/* Excel */
.xls:before,
.xlsx:before {
content: "\f1c3";
font-family: FontAwesome;
font-weight: normal;
}
/* PowerPoint */
.ppt:before,
.pptx:before {
content: "\f1c4";
font-family: FontAwesome;
font-weight: normal;
}
/* txt  */
.txt:before {
content: "\f1c1";
font-family: FontAwesome;
font-weight: normal;
}
/* pdf */
.pdf:before {
content: "\f1c1";
font-family: FontAwesome;
font-weight: normal;
}
/* 圖片 */
.jpg:before,
.jpeg:before,
.gif:before,
.png:before {
content: "\f1c5";
font-family: FontAwesome;
font-weight: normal;
}
/* 視頻 */
.mp4:before,
.mov:before {
content: "\f1c6";
font-family: FontAwesome;
font-weight: normal;
}
/* 音頻 */
.mp3:before,
.wav:before {
content: "\f1c7";
font-family: FontAwesome;
font-weight: normal;
}
/* 壓縮包 */
.zip:before,
.rar:before {
content: "\f1c9";
font-family: FontAwesome;
font-weight: normal;
}