Custom File Types with Stacked Icons

Font Awesome comes with lots of file type icons already. But what if you have a file type that's not a part of the set? No problem.

With a bit of custom CSS, we can get just about any file type icon we need. By using stacked icons, we can mix existing file type icons alongside our custom file types. And we can stack icons or text just as easily.

See the Pen KnzJg by Dave Gandy (@davegandy) on CodePen.

The first audio file type icon is included in Font Awesome already. The second, representing a settings document, is a gear icon stacked on an outlined file icon. And the third is an easy way to generate an icon for any three letter filetype.

HTML

<i class="fa fa-file-audio-o"></i>
<span class="fa-stack">
  <i class="fa fa-gear fa-stack-1x"></i>
  <i class="fa fa-file-o fa-stack-2x"></i>
</span>
<span class="fa-stack">
  <span class="fa-stack-1x filetype-text">PSD</span>
  <i class="fa fa-file-o fa-stack-2x"></i>
</span>

CSS

The first thing we need to do is push down the stacked icons and text so they align in the lower section of the outlined file icon. Then we size down the .fa-stack to make it the same size as our normal icons, then adjust the stack vertically so things are properly aligned. Finally, we grab an excellent condensed Google Web font so we can make the text as large as possible.

.fa-stack-1x { top: .25em; }
.fa-stack {
  font-size: .5em;
  vertical-align: -16%;
}
.filetype-text {
  font-size: .7em;
  font-weight: 700;
  font-family: 'Oswald';
}

Et voilà. Custom file types using stacked icons.

Have some improvements for the method above? Drop us a note on Twitter at @fontawesome.