【コピペOK】自動でPDFのアイコンがつくボタン(Excelファイルや、Wordファイルも)

自動でPDFファイルのアイコンがつくボタン

PDFファイルのアイコンがつくボタンは毎回クラス付けたり面倒だな。
自動でついてくれないかな。

hrefの中の拡張子を認識して、自動でアイコンがつくようなCSSを共有しますね。
以前にノーマルなaタグバージョンの記事も書いていますので、必要な方はそちらもどうぞ。

完成形のイメージ

こんな感じです。

See the Pen file-btn by shimpei (@shimpei) on CodePen.

解説

href内の拡張子によってFontAwesomeのアイコンを変更しています。

hrefの中に.pdfがあるとき
[href$=".pdf"]{.pdfの時のスタイル}
hrefの中に.xlsがあるとき
[href$=".xls"]{.xlsの時のスタイル}
hrefの中に.decがあるとき
[href$=".doc"]{.docの時のスタイル}

詳しい解説は下の記事を参照ください。やっていることは、こちらの記事と全く同じです。
いろんな所で応用できますので、ぜひご活用ください。

最後に

今回は以前解説した「自動でPDFのアイコンをつけるCSS」のボタンバージョンを作成してみました。
hrefの拡張子によってスタイルを変更するというアイデアで他にも色々できるかもしれません。

この記事があなたの参考になっていれば幸いです。

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

この記事を書いた人

アバター

しんぺー

Web制作会社のフロントエンドエンジニア。
2019年9月よりWeb制作を独学、2021年3月ジョブチェンジでエンジニアに。

プログラミングを始めたい方や、学習中の方、副業・転職したい方に向けて発信していますが、業務で覚えた技術がメインになってます。

趣味は音楽です。下の「ウェブサイト」に趣味で作ったサイトをリンクしていますので、興味ある方はどうぞ。