This is font-awsome like icon pack for file icons
It's very easy to use
bower install --save square-file-icons
npm install --save square-file-icons
use rawgit.com CDN this way you don't need to download anything just add link tag to head of html
that points to latest version
<link href="https://cdn.rawgit.com/thecotne/square-file-icons/master/dist/css/square-file.min.css" rel="stylesheet">
or link with tag of version
<link href="https://cdn.rawgit.com/thecotne/square-file-icons//dist/css/square-file.min.css" rel="stylesheet">
this is a free service, so there are no uptime or support guarantees.
make span or i tag
add class sf and another class to specify icon like this
<span class="sf sf-pdf"></span>
you can change icon color from css color property like this
<span class="sf sf-5x sf-pdf" style="color: #EA4C3A"></span>
or use sf-colorful class
<span class="sf sf-5x sf-colorful sf-pdf"></span>
you can also toggle class with sf-hover see html example for end result
| File Type | Preview | Class Name | Preview | Class Name |
|---|---|---|---|---|
| Excel | sf-excel-o | sf-excel | ||
| Image | sf-image-o | sf-image | ||
| sf-pdf-o | sf-pdf | |||
| PowerPoint | sf-powerpoint-o | sf-powerpoint | ||
| Text | sf-text-o | sf-text | ||
| Word | sf-word-o | sf-word |