Cou氏の徒然日記

ほのぼの日記ブログです。

Font Awesome

coublood.hatenablog.com

 

試しに少し前の記事  でやってみたんですが、Font Awesome  を使い始めてみました。

fontawesome.com

 

ヤブログの時は、Webアイコンが使えないので、限られたアイコンしか使えず、ちょっとイマイチだなぁ・・・と思っていて、いつか導入してみたいなあと考えていたんですが、ようやくです。

まあ、こういうことをやりたいから、そのためにHTML5+CSSを勉強していたわけですが。 (笑)

coublood.hatenablog.com

 

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">&nbsp;</i>

ですね。

(はてなブログの場合,おまじないのように&nbsp;を挟まないと、タグが勝手に消されてうまくいかないのがちょっと面倒です)

&nbsp; 

「No-Break SPace」の略。

スペースの箇所での自動的な改行(行の折り返し)を防ぐ特殊なスペース。

 

Font Awesomeは無料でもかなり多くのWebアイコンを使用できるので、かなり便利です。もちろん、有料ならさらに数倍のアイコンを使用できますが、さすがにそこまでは…という感じです。

こういうことがやれるとブログも楽しいです。