2019/06/24
fontawesomeアイコン
Bブログ >
また悩ましい事態を発見してしまいました。
『fontawesomeアイコン』のバージョンが、5.8.2から5.9にアップしていました。
『fontawesomeアイコン』というのはこの子たちです。
アイコンサイト紹介
わたしが加工した、『加工済みサンプルサイト』や『歯科医院サンプル』のテンプレートには、旧バージョンの『fontawesome v5.8.2』をHTMLに最初から入れています。
下図のマーカー部分です。

Font Awesome
本家の Font Awesome の無料で使えるリストは、『All 1,534 Awesome Icons』です。
Font Awesome v5.8.2 Free 1,515 v5.9.0
本家のリストが使いにくいので、わたしが作ったのが、Font Awesome v5.8.2 Free 1,515 改め、『Font Awesome v5.9.0 Free』です。
アイコンの使い方
『Font Awesome v5.9.0 Free』を開くと以下のように表示されます。
通常使うのはピンク枠の方です。クリックするとコピーされるので、HTMLの任意の場所にペーストします。
※ブルー枠は、CSS等で使う場合があるようです。

記述例
実体1: リンク先
記述1:<a href="#" target="b_blank"><i class="fas fa-external-link-alt"></i> リンク先</a>
実体2: 2倍サイズ
記述2:<i class="fas fa-coffee fa-2x"></i> 2倍サイズ
実体3:3倍サイズ
記述3:<span class="mido"><i class="fas fa-bug fa-3x">3倍サイズ</i></span>
ここにテキストも入力できます
※最新の『v5.9』になった現在も『v5.8.2』は、上記のように使用できます。
わたしのサイトは、『v5.9』に更新しました。
本来なら、『加工済みサンプルサイト』や『歯科医院サンプル』のテンプレートも『v5.9』に更新したいのですが、『v5.8.2』では制約無しで使用出来ていた『"stylesheet"リンク』が、『v5.9』では、ユーザー登録が必須となっていました。
『v5.9』の『"stylesheet"リンク』に変更することは、二次配布に相当する可能性があるため、『v5.8.2』のままにしています。
『v5.9』を使用したい場合は、個人での登録をお願いします。
Font Awesome 登録
『Font Awesome スタート』をクリックします。
わたしは英語が苦手なので、Google Chrome でリンクを開いて、『翻訳』を使って作業を進めました。
メールアドレス
下が翻訳されたスタートページです。
赤枠に有効なメアドを入力して、『enter』または『return』キーを押します。

メールを確認
送られてきた『Font Awesome』からのメールを開いて、赤枠をクリックします。

登録情報を記入
画像は省略しますが、開いたリンクの指示通りにパスワードを設定して、名前、『Font Awesome』をいつから知っているか、お気に入りのアイコン*は何か...等を入力して登録を完了させます。
※アイコン例
:fas fa-bug、 :fas fa-coffee、 :fas fa-file、 :fas fa-folder-open、 :fas fa-user-secret 等。
キットナンバー
登録後のスタートページです。
赤枠任意の文字列があなたの『キットナンバー』です。赤枠をクリックします。

コードのコピー
必要なのは、下図の赤下線の記述だけです。
コピー をクリックすると記述がコピーされます。

コードの差し替え
この項の冒頭で紹介した下図のマーカー部分をコピーした文字列と差し替えれば、『fontawesome v5.9.0』が使えます。

<script src="https://kit.fontawesome.com/キットナンバー.js"></script>
まとめ
Google Chrome 翻訳であちこちつついてみましたが、無料だし、メアドを登録するだけだし、『fontawesome v5.9.0』を導入する方が、かなり便利な気がします。
「そんな面倒臭いことしなくても、導入している人のサイトからコードを拝借しちゃえばいいじゃん。」
理屈で言えばごもっとも。でも、道義的にはどうでしょう。^^;
それよりも、『キットナンバー』の持ち主さんが、気まぐれに『キットナンバー』を削除しちゃったら、多分、そのナンバーを使用しているサイトから、ボワンとアイコンが消えると思います。^^v
自分のものを、自分で管理する方が、結果的にはお得になると思います。
補足の蛇足
HTMLサイトでは、『キットナンバー.js』のコードで上手く行きますが、WordPressではテーマによってはv4等の古いバージョンを組み込んでいるものも少なくありません。
その場合『キットナンバー.js』だと古いバージョンが表示されないケースが有ります。
わたしは、WordPressでは、旧記述法の『v5.9.0』を渋々採用としました。
旧記述『v5.9.0』:誰でも同じ記述です。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" integrity="sha384-i1LQnF23gykqWXg6jxC2ZbCbUMxyw5gLZY6UiUS98LYV5unm8GWmfkIS6jqJfb4E" crossorigin="anonymous">
※この記述を確認するには『Font Awesome』にログインした状態で以下にアクセスします→ https://fontawesome.com/account/cdn