試しに少し前の記事 でやってみたんですが、Font Awesome を使い始めてみました。
ヤブログの時は、Webアイコンが使えないので、限られたアイコンしか使えず、ちょっとイマイチだなぁ・・・と思っていて、いつか導入してみたいなあと考えていたんですが、ようやくです。
まあ、こういうことをやりたいから、そのためにHTML5+CSSを勉強していたわけですが。 (笑)
Font Awesome 5のWebアイコンを使用する準備は簡単。
<link href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" rel="stylesheet">
をCSSのヘッダに記述して読み込ませるだけ。いわゆるCDNを利用したやり方です。
(上記は、5.11.2の場合。バージョンアップしてそのWebアイコンを使いたい場合は、更新要。)
CDN (Content Delivery Network : コンテンツデリバリーネットワーク)
大容量のデジタルコンテンツをインターネット上で大量配信するためのネットワークのこと。同一のコンテンツを多くのユーザーの端末に効率的に配布するために使われる仕組み。
あとは,Font Awesomeのサイトで使いたいアイコンのタグ情報をコピーして,HTMLとして張り付けるだけ。 なら,
<i class="fab fa-font-awesome-alt"> </i>
ですね。
(はてなブログの場合,おまじないのように を挟まないと、タグが勝手に消されてうまくいかないのがちょっと面倒です)
「No-Break SPace」の略。
スペースの箇所での自動的な改行(行の折り返し)を防ぐ特殊なスペース。
Font Awesomeは無料でもかなり多くのWebアイコンを使用できるので、かなり便利です。もちろん、有料ならさらに数倍のアイコンを使用できますが、さすがにそこまでは…という感じです。
こういうことがやれるとブログも楽しいです。