Font Awesomeのファイルアイコンの中にテキストを追加する #CSS

Font Awesome のファイルアイコンは何種類か用意されていますが、
そこにない形式のファイルも手っ取り早くアイコンにする方法です。

→

こんな感じで、何も書いていないアイコンの上に、ファイル形式のテキストを追加します。

やり方

Font Awesome の Stacked Icons（アイコンを重ねる）機能を使います。
ここで、２つのアイコンを重ねるのではなく、後に書く方をテキストにします。

HTML

<span class="fa-stack fa-lg">
  <span class="fa fa-file-o fa-stack-2x"></span>
  <span class="fa fa-stack-1x">psd</span>
</span>

これだけでファイルアイコンと文字が重なるので、あとは CSS でバランスを整えます。

CSS

.fa-stack {
  color: #666;
  font-size: 3em;  /* ← アイコン全体の大きさをここで変更できる */
}
.fa-stack-1x {
  /* 中のテキストのバランスは ↓ を好みで調整 */
  font-size: 0.9em;
  font-family: monospace;
  margin-top: 8px;
}

以上です。

実際のサンプルはこちら
https://jsfiddle.net/k3mp7vce/