Searching....
Search Results
Font Awesome File (Folder, Report, Document,Page)
Font Awesome File icon can be used to represent documents, downloads, uploads, and more. The file icon can be added to your web pages using different CSS classes, such as fa fa-file for v4, fas fa-file for v5, or fa-solid fa-file for Font Awesome File 6. This file icon also symbolizes a folder, page, document, resume, template, and report
Fontawesome Version 4.X
file
<i class='fa fa-file'></i> file
<i class='fa fa-file' style='color: white'></i> file
<i class='fa fa-file' style='color: red'></i> file
<i class='fa fa-file' style='color: blue'></i> file
<i class='fa fa-file' style='color: #f3da35'></i> Fontawesome Version 5.X
file
<i class='fas fa-file'></i> file
<i class='fas fa-file' style='color: white'></i> file
<i class='fas fa-file' style='color: red'></i> file
<i class='fas fa-file' style='color: blue'></i> file
<i class='fas fa-file' style='color: #f3da35'></i> FA Regular file Version 6.X
px Enter Size
Color Code
How to add Font Awesome file Icon ?
Font Awesome Icon fa fa file Icon can be added to any web page simply as below. You can integrate Icon in web pages by just adding following below syntax & icon code.
HTML Code
Get complete html code for icon file
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
</head>
<body>
<i class='fa fa-file'></i>
</body>
</html> Tags
portfolio,binder,box,document case,filing cabinet,verb,categorize,classify,organize,put in place,put in order,order,arrange,catalogue,tabulate,index,pigeonhole,put on record,record,enter,folder,report,document,page,doc,resume,document view,template,pdf,excel
Change Font Awesome Icon File Color
Sometimes we need icons in different color, as we suggested by adding css style we can change color. Here we have created one example to change color of icons with css classes.
<style>
.blue-color {
color:blue;
}
.green-color {
color:green;
}
.teal-color {
color:teal;
}
.yellow-color {
color:yellow;
}
.red-color {
color:red;
}
</style>
<i class='fa fa-file blue-color'></i>
<i class='fa fa-file green-color'></i>
<i class='fa fa-file teal-color'></i>
<i class='fa fa-file yellow-color'></i>
<i class='fa fa-file red-color'></i>
Note- Make Sure You have included the below Font Awesome file in header-
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
Advertisements
Advertisements