1. 概要
HTML 上で、アイコンを表示したいときは「Font Awesome」というのを使うのが便利らしい。
日本語のウィキペディアには表示がありませんでした。
英語「Font Awesome - Wikipedia」。
これが自由に使っていいものか法的な根拠が調べきれなかったのですが、検索するページみな、勝手に使っているようなので使ってみます。
問題がある場合は、ご指摘ください。
本項は下記のサイトを参考にさせていただきました。
「Font Awesome」(配布元本家)
「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. わたしの使うアイコン
わたしの使うアイコンをメモで残しています。
名称 | 表示 | 表 記 | コード | 備考 |
インポート | | <i class="fa-solid fa-file-import"></i> | ※4 | |
エクスポート | | <i class="fa-solid fa-file-export"></i> | ※4 | |
書き込み | | <i class="far fa-edit"></i> | f044 | |
カーソル | | <i class="fa-solid fa-arrow-pointer"></i> | f245 | |
紙飛行機 | | <i class="fa fa-paper-plane"></i> | f1d8 | |
カレンダー | | <i class="fas fa-calendar"></i> | f133 | |
鍵 | | <i class="fas fa-bell"></i> | f0f3 | |
鐘 | | <i class="fa-solid fa-unlock-keyhole"></i> | - | ※4 |
鐘(白ヌキ) | | <i class="far fa-bell"></i> | ff0f3 | |
カメラ | | <i class="fas fa-camera"></i> | f030 | |
キーボード | | <i class="fas fa-keyboard"></i> | f11c | |
クローン | | <i class="fa fa-clone"></i> | f24d | ※1 |
ゴミ箱 | | <i class="fas fa-trash-alt"></i> | f2ed | |
進入禁止 | | <i class="fa-solid fa-ban"></i> | f05e | |
ストップウォッチ | | <i class="fa-regular fa-stopwatch"></i> | f2f2 | |
砂時計 | | <i class="fa-regular fa-hourglass"></i> | f254 | |
ダウンロード | | <i class="fa-solid fa-download"></i> | f019 | |
地球儀 | | <i class="fa-solid fa-earth-asia"></i> | f57e | |
ディスク | | <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-battery-full"></i> | f240 | 満タン |
電池、充電、バッテリー | | <i class="fas fa-battery-three-quarters"></i> | f241 | 3/4 |
電池、充電、バッテリー | | <i class="fas fa-battery-half"></i> | f242 | 半分 |
電池、充電、バッテリー | | <i class="fas fa-battery-quarter"></i> | f243 | 1/4 |
電池、充電、バッテリー | | <i class="fas fa-battery-empty"></i> | f244 | 空っぽ |
点(縦並び) | | <i class="fas fa-ellipsis-v"></i> | f142 | |
てんてんてん | | <i class="fas fa-ellipsis-h"></i> | f141 | |
歯車 | | <i class="fa fa-cog"></i> | f013 | |
パズル(Plug-in) | | <i class="fa-solid fa-puzzle-piece"></i> | f12e | |
バッテン(閉じる) | | <i class="fa-solid fa-xmark"></i> | f00d | |
ハンバーガーメニュー | | <i class="fa-solid fa-bars"></i> | f002 | |
びっくり | | <i class="fas fa-exclamation-circle"></i> | f06a | |
びっくり三角 | | <i class="fas fa-exclamation-triangle"></i> | f071 | |
人(複数) | | <i class="fas fa-user-friends"></i> | f500 | |
ファイル | | <i class="ar fa-file"></i> | f15b | |
フォルダ | | <i class="far fa-folder"></i> | f07b | |
フォルダ(塗りつぶし) | | <i class="fa-solid fa-folder"></i> | f07b | |
フロッピー(黒) | | <i class="fas fa-save"></i> | f0c7 | |
フロッピー(白) | | <i class="far fa-save"></i> | f0c7 | |
ペン(鉛筆) | | <i class="fa fa-pencil-alt"></i> | f303 | |
ペン(鉛筆) | | <i class="fa fa-pencil"></i> | f040 | ※3 |
編集 | | <i class="fa fa-edit"></i> | f044 | |
虫メガネ | | <i class="fa fa-search"></i> | f0c9 | |
目 | | <i class="fas fa-eye"></i> | f06e | |
目(白ヌキ) | | <i class="far fa-eye"></i> | f06e | |
メニュー | | <i class="fab fa-elementor"></i> | f430 | |
リンク | | <i class="fas fa-link"></i> | f0c1 | |
レンチ | | <i class="fa-solid fa-wrench"></i> | f0ad | |
ロケット(ランチャー) | | <i class="fas fa-rocket"></i> | f135 | |
名称 | 表示 | 表 記 | コード | 備考 |
下向き箱矢印 | | <i class="fa fa-caret-square-down"></i> | f150 | ※2 |
上 | | <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 | ※3 |
下(長) | | <i class="fa fa-long-arrow-down"></i> | f175 | ※3 |
左(長) | | <i class="fa fa-long-arrow-left"></i> | f177 | ※3 |
右(長) | | <i class="fa fa-long-arrow-right"></i> | f178 | ※3 |
上(手) | | <i class="far fa-hand-point-up"></i> | f0a6 | |
下(手) | | <i class="far fa-hand-point-down"></i> | f0a7 | |
左(手) | | <i class="far fa-hand-point-left"></i> | f0a5 | |
右(手) | | <i class="far fa-hand-point-right"></i> | f0a4 | |
ダウンロード | | <i class="fa-solid fa-cloud-arrow-down"></i></i> | f0ed | |
山形袖章 上 | | <i class="fa fa-chevron-up"></i> | f077 | |
山形袖章 下 | | <i class="fa fa-chevron-down"></i> | f078 | |
山形袖章 左 | | <i class="fa fa-chevron-left"></i> | f053 | |
山形袖章 右 | | <i class="fa fa-chevron-right"></i> | f054 | |
指さし | | <i class="fa-solid fa-hand-pointer"></i> | f25a | |
上○囲み | | <i class="far fa-arrow-alt-circle-up"></i> | f35b | |
双方向 | | <i class="fas fa-exchange-alt"></i> | f362 | |
回転(右回り) | | <i class="fas fa-redo"></i> | f01e | |
回転(左回り) | | <i class="fas fa-undo"></i> | f0e2 | |
プレイ | | <i class="fas fa-play"></i> | f04b | |
ストップ | | <i class="fas fa-stop"></i> | f04d | |
リスタート | | <i class="fas fa-sync-alt"></i> | f2f1 | |