HTML - ウェブフォント - アイコン Font Awesome

1.　概要

2.　link の設置

3.　設置方法

4.　わたしの使うアイコン

5.　わたしの使うアイコン（矢印の類）

6.　アルファベット

1.　概要

　HTML 上で、アイコンを表示したいときは「Font Awesome」というのを使うのが便利らしい。

　日本語のウィキペディアには表示がありませんでした。
　英語「Font Awesome - Wikipedia」。

　これが自由に使っていいものか法的な根拠が調べきれなかったのですが、検索するページみな、勝手に使っているようなので使ってみます。
　問題がある場合は、ご指摘ください。

　本項は下記のサイトを参考にさせていただきました。

「Icons | Font Awesome」（配布元本家）
「Font Awesomeのアイコンを日本語でサクっと検索。Web制作の作業効率UP！」
「HTMLのみでアイコンを表示させる方法。時計・家・カメラなど - 生活情報オンライン」
「良くあるメニュー・アイキャッチのアイコンに使えそうな Font Awesome のまとめ」


2.　link の設置

　まずは、「HTML」のヘッダ部に、以下を記載します（バージョンがこれで古くないかは未確認。2019年01月23日）。


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">


　と、上記は、最初に参考にしたサイトのものですが・・・。

　「Start | Font Awesome」（配布サイト本家）によれば、2019年02月25日現在は


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">


　が、正しいらしい。
　長くなっとるし、属性名「integrity」「crossorigin」は、エディタによっては警告が表示されますので、その場合はエディタの設定をいじる必要があります。
　あんど。下の方で設置していたアイコンが消えてしまった。
　表記方法が変わったようです。

　2022年6月23日現在の最新リリースバージョンは「6.1.1」とのこと。
　また、書き方が変わりました。
　探すのが大変でしたが、本家の「Install Manually | Font Awesome Docs」で見つけました。
　下記のように記述しました。


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" integrity="sha384-/frq1SRXYH/bSyou/HUp/hib7RVN1TawQYja658FEOodR/FQBKVqT9Ol+Oz3Olq5" crossorigin="anonymous"/>


　今回、だいぶ記述が変わっているようなのですが、下の一覧表は、キープされています。

3.　設置方法

　で例えば、歯車アイコンを表示するには


<i class="fa fa-cog"></i>


　と書けばいいらしい。

　でまぁ、書いてみると →  ← ここに出ているはず・・・。

　このクラス名は検索するしかないみたいです。

4.　わたしの使うアイコン

　わたしの使うアイコンをメモで残しています。

　※１　紙が重なっているように見えるが、クローンらしい。

5.　わたしの使うアイコン（矢印の類）

　矢印の類。

　※２　メニューのアイコンで使ったりします。
　※３　バージョンが変わって、表現が変わりました。

　名称はわたしの勝手な命名です。

6.　アルファベット

　アルファベットの類。