Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

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

やり方

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

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/

nyu
最近はLaravelとVue.jsで開発しています。 SIer→Web開発→留学→フリーランスを経て、再び会社員でWebシステム開発中。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away