【コピペOK】自動でPDFのアイコンをつけるCSS（Excelファイルや、Wordファイルも）

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

ボタンバージョンもあります

https://sinpe-pgm.com/file-icon-button/

完成形のイメージ

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>

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;
    }
  }
}

最後に

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

最後までありがとうございました。