CDNから使えるためダウンロードと配置が不要。
Font Awesome
アイコン一覧
検索
Font Awesomeのアイコンを日本語でサクっと検索。Web制作の作業効率UP！
例
使ってみる
CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
ブラウザの<head>内などアイコン参照前までのどこかにペーストする。
アイコンを表示する
- 一覧から任意のアイコンを選択する
- HTMLコードをコピーする
- HTMLに貼り付ける
- ブラウザで表示する
<i class="fa fa-rss" aria-hidden="true"></i>
応用
HTMLタグ
<i class="fa {fa-icon-name}" aria-hidden="true"></i>
<i>はイタリック体にするHTML要素。それにclassを指定することでアイコンを表示する仕組みらしい。{fa-icon-name}を任意のアイコン名に変えることで異なるアイコンを使えるようだ。
class
| 表示 | class値 | 説明 |
|---|---|---|
fa-rss |
fa-rssなど任意のアイコン名。一覧から探す。 |
|
fa-lg |
サイズを大きくする。 | |
fa-2x |
サイズを2倍にする。 | |
fa-3x |
サイズを3倍にする。 | |
fa-4x |
サイズを4倍にする。 | |
fa-5x |
サイズを5倍にする。 | |
fa-border |
ボーダーラインを表示する。 | |
| まわりこみ | fa-pull-left |
サイズを5倍にする。 |
fa-spin |
回転アニメ。fa-spinner, fa-refresh, fa-cogアイコンのみ対象 |
|
fa-pulse |
8段階の回転アニメ。fa-spinner, fa-refresh, fa-cogアイコンのみ対象 |
|
fa-rotate-90 |
時計回り。 | |
fa-rotate-180 |
時計回り。 | |
fa-rotate-270 |
時計回り。 | |
fa-stack |
2つのアイコンを組み合わせる。 |
Boostrap連携
http://fontawesome.io/examples/ にてBootstrap 3 Examplesの箇所がある。BoostrapというCSSフレームワークがあるらしい。リッチな表現が可能になるようだ。以下はBootstrapを適用していないため、参照先のような表示になっていない。
list
<div class="list-group"> <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a> <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a> <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a> <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a> </div>
input
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-unlock"></i> Make admin</a></li>
</ul>
</div>
一覧
Hand
| 表示 | 名前 | コード |
|---|---|---|
| thumbs-up | <i class="fa fa-thumbs-up" aria-hidden="true"></i> |
|
| thumbs-down | <i class="fa fa-thumbs-down" aria-hidden="true"></i> |
|
| handshake-o | <i class="fa fa-handshake-o" aria-hidden="true"></i> |
FileSystem
| 表示 | 名前 | コード |
|---|---|---|
| folder | <i class="fa fa-folder" aria-hidden="true"></i> |
|
| file | <i class="fa fa-file" aria-hidden="true"></i> |
|
| file-text | <i class="fa fa-file-text" aria-hidden="true"></i> |
|
| file-code | <i class="fa fa-file-code" aria-hidden="true"></i> |
|
| file-image | <i class="fa fa-file-image" aria-hidden="true"></i> |
|
| file-audio | <i class="fa fa-file-audio" aria-hidden="true"></i> |
|
| file-video | <i class="fa fa-file-video" aria-hidden="true"></i> |
|
| file-zip | <i class="fa fa-file-zip" aria-hidden="true"></i> |
SpreadSheet
https://docs.google.com/spreadsheets/d/1zu3a0nPm9utnK6oP-RLl0WZCu7g0TmKtYs-fRSZj_k8/edit?usp=sharing
タグ生成が面倒だったのでスプレッドシートで楽をしようとした。名前の一覧取得が面倒だったので途中まで。
Web App
RSS
物理名
装置名
装置間インタフェース
デバイス操作
概念名
リンク
HTMLタグ
作業名
アプリケーション操作
テーブル操作
WebSite作業名
ソフトウェア
OS
ブラウザ
所感
分類がよくわからない。使いドコロがよくわからない。HTMLタグ貼り付けねば使えないのが辛い。IMEの変換で出せたらいいのに。Unicodeになかったっけ？
