本の旅6　Font Awesome

このサイトでやりたかったコトの１つには
蔵書目録ってのがあるのだが・・・

自分がこれまでに購入した本が
本棚に収まってるのか、電子書籍版を持ってるのか
電子書籍だとしたらhontoか、SONYか、BookLiveか、その他か
すぐにわかるように印を付けておきたいのだ

それにはｱﾏｿﾞﾝを利用させてもらって
表紙の画像付きのバナーを貼るのがこれまでは１番簡単だったが
ちょうど（？）この機能が使えなくなったようなので・・・

テキストリンクに自力で画像貼りをするコトにした

<div>
    <img src="img/画像.jpg" height="350" />
    <i class="fas fa-book"></i>
    <a href="https://www.amazon.co.jp/dp/～">
        <i class="fas fa-external-link-alt"></i>
    </a>
</div>

i タグはFont Awesomeでheader.phpで呼び出してる

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

これでこんな表示に落ち着いた

本棚にある紙の書籍は本マークにして
電子書籍はアルファベットを表示したらいんじゃん♪

<i class="fa-solid fa-h"></i>
<i class="fa-solid fa-s"></i>
<i class="fa-solid fa-b"></i>

というワケでこのページはHTMLのコードをコピペするのに使うので
何かあったらこの後に追記して行こうっと