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

 
1. 概要
2. link の設置
3. 設置方法
4. わたしの使うアイコン

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」は、エディタによっては警告が表示されますので、その場合はエディタの設定をいじる必要があります。  あんど。下の方で設置していたアイコンが消えてしまった。  表記方法が変わったようです。

3. 設置方法

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

<i class="fa fa-cog"></i>
 と書けばいいらしい。  でまぁ、書いてみると → ← ここに出ているはず・・・。  このクラス名は検索するしかないみたいです。

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

 わたしの使うアイコンをメモで残しています。
名称 表示 表記 コード 備考
紙飛行機 <i class="fa fa-paper-plane"></i> \f1d8
クローン <i class="fa fa-clone"></i> \f24d ※1
カメラ <i class="fas fa-camera"></i> \f030
ディスク <i class="fa fa-compact-disc"></i> \f51f
デスクトップパソコン <i class="fas fa-desktop"></i> \f108
電源断(power-off) <i class="fas fa-power-off"></i> \f011
てんてんてん <i class="fas fa-ellipsis-h"></i> \f141
歯車 <i class="fa fa-cog"></i> \f013
ハンバーガーメニュー <i class="fa fa-bars"></i> \f002
フォルダ <i class="far fa-folder"></i> \f07b
フロッピー <i class="fa fa-save"></i> \f0c7
フロッピー <i class="fa fa-floppy-o"></i> \f0c7 ※2
ペン(鉛筆) <i class="fa fa-pencil-alt"></i> \f303
ペン(鉛筆) <i class="fa fa-pencil"></i> \f040 ※2
虫メガネ <i class="fa fa-search"></i> \f0c9

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

 矢印の類。

名称 表示 表記 コード 備考
<i class="fa fa-arrow-up"></i> \f062
<i class="fa fa-arrow-down"></i> \f063
<i class="fa fa-arrow-left"></i> \f060
<i class="fa fa-arrow-right"></i> \f061
上(長) <i class="fa fa-long-arrow-alt-up"></i> \f30c
下(長) <i class="fa fa-long-arrow-alt-down"></i> \f309
左(長) <i class="fa fa-long-arrow-alt-left"></i> \f30a
右(長) <i class="fa fa-long-arrow-alt-right"></i> \f30b
上(長) <i class="fa fa-long-arrow-up"></i> \f176 ※2
下(長) <i class="fa fa-long-arrow-down"></i> \f175 ※2
左(長) <i class="fa fa-long-arrow-left"></i> \f177 ※2
右(長) <i class="fa fa-long-arrow-right"></i> \f178 ※2
上○囲み <i class="far fa-arrow-alt-circle-up"></i> \f35b
双方向 <i class="fas fa-exchange-alt"></i> \f362

 ※2バージョンが変わって、表現が変わりました。

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