自動でファイルのiconを表示するCSS

PDFとかExcelファイルある時に自動でアイコン付けれないかな?
毎回クラス付けるの大変だし、どうしたらいいんだ?

ファイルの拡張子を認識して、自動でアイコンがつくようなテンプレートを共有します。
実用的で使いやすいですよ。
ボタンバージョンもあります
完成形のイメージ
See the Pen file-icon by shimpei (@shimpei) on CodePen.
解説

基本のHTML
aタグにfile-icon
のクラスを付けています。
href内の拡張子に.pdf、.xls、.doc
などがついたときにそれぞれスタイリングを切り分けています。
おまけでサブクラスの.-after
もつけました。アイコンの位置を後ろ側に変更したい時に使います。
<ul> <li><a class="file-icon" href=".pdf">PDFファイルダウンロード</a></li> <li><a class="file-icon" href=".xls">Excelファイルダウンロード</a></li> <li><a class="file-icon" href=".doc">Wordファイルダウンロード</a></li> <li><a class="file-icon -after" href=".pdf">PDFファイルダウンロード|.file-icon .-after</a></li> </ul>

このHTMLを基本に、もっと楽にスッキリ記述する方法も紹介します。
まずは肝心のCSSを解説します。
SCSS
href内の拡張子によってFontAwesomeのアイコンを変更しています。
ちょっと長いですが、色付きのところがぽいんと
- hrefの中に
.pdf
があるとき[href$=".pdf"]{.pdfの時のスタイル}
- hrefの中に
.xls
があるとき[href$=".xls"]{.xlsの時のスタイル}
- hrefの中に
.dec
があるとき[href$=".doc"]{.docの時のスタイル}
.file-icon { color: #000; text-decoration: none; display: inline-block; position: relative; margin-left: 1em; &::before { content: ""; color: #E04545; text-decoration: none; position: absolute; left: -1em; top: 3px; font: var(--fa-font-solid); font: { weight: 900; size: 16px; } } &:hover { color: #000; text-decoration: underline; } &[href$=".pdf"] { &::before { content: "\f1c1"; } } &[href$=".xls"], &[href$=".xlsx"], &[href$=".xlsm"] { &::before { content: "\f1c3"; color: #106834; } } &[href$=".doc"], &[href$=".docx"] { &::before { content: "\f1c2"; color: #1A62C3; } } &.-after { margin-left: 0; &::before { left: unset; right: -1em; } } }
応用編

エクステンドでもっと楽にスッキリ記述する
SCSSのエクステンドを使って、.file-icon-list
内のaタグに.file-icon
をぶち込みます。
なんかわかりにくいですが、aタグに毎回クラスを書かなくても、ulタグにクラスをつけるだけでよくなります。
aタグの数が多くなるとこっちのが楽ですね。
SCSS
.file-icon-list { >li { >a { @extend .file-icon; } } }
HTML
ul
タグに.file-icon-list
のクラスをつければOK!
<ul class="file-icon-list"> <li><a href=".pdf">PDFファイルダウンロード</a></li> <li><a href=".xls">Excelファイルダウンロード</a></li> <li><a href=".doc">Wordファイルダウンロード</a></li> </ul>
実践編

これまでの全てを活用して、お知らせのリストに適用してみます

先程のエクステンドと同様ですが、お知らせリストのaタグに.file-icon
とサブクラスの.-after
を適用しています。
これで、お知らせ記事がPDFファイルだったり、Excelファイルだった時に自動でアイコンが付きます。
HTML
<ul class="news-list"> <li> <div class="data-box"> <time datetime="2023-02-04">2023.02.04</time> <span class="tag">お知らせ</span> </div> <a href=".pdf">お知らせのタイトルが入ります。</a> </li> </ul>
SCSS
ul.news-list { >li { a { @extend .file-icon; @extend .-after; } } }
最後に

今回は地味ですがサイトを運用していく中で便利な記述を紹介しました。
普段は使用する必要がなくても、依頼されたときに「パッと」コピペで実装できると嬉しいですね。
そのように、この記事があなたの助けになっていれば幸いです。
最後までありがとうございました。