square file icons

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/<version number>/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
PDF		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?

submit issue