This is font-awsome like icon pack for file icons
It's very easy to use
install with bower or npm
bower install --save square-file-icons
npm install --save square-file-icons
don't want to download?
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.
how to use
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
list of icons
| 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 |
find bug?
Posted on Utopian.io - Rewarding Open Source Contributors