■ Font Awesomeとは？
* アイコンフォント * 商用利用可能（詳細は、以下の「ライセンス」を参照）
■ 公式サイト
http://fortawesome.github.io/Font-Awesome/使用可能なアイコン
http://fortawesome.github.io/Font-Awesome/icons/ライセンス
以下のページには、「GPL friendly」とは書いてあるが、内訳は以下の通りhttp://fortawesome.github.io/Font-Awesome/license/
* フォント：SIL OFL 1.1 * コード：MIT * ドキュメント：CC BY 3.0
■ 設定方法
* 2つある方法[1] ダウンロードする場合
1-1) 公式サイトからダウンロード => 今回は、zipファイル「font-awesome-4.4.0.zip」を落としたhttp://fortawesome.github.io/Font-Awesome/
1-2) zipを解凍し、任意の場所に設定する 1-3) 以下を組み込む <link rel="stylesheet" href="./font-awesome-4.4.0/css/font-awesome.min.css">
方法[2] CDN（Content Delivery Network。URLを指定した場合）
2-1) 以下を組み込む <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> # 最新URLは以下を参照。http://fortawesome.github.io/Font-Awesome/get-started/
■ 使い方
アイコンの大きさを変更
<i class="fas fa-user fa-lg"></i> fa-lg (1.333…倍) fa-2x (2倍) fa-3x (3倍) fa-4x (4倍) fa-5x (5倍)
アニメーションする
* 以下の関連記事を参照のことhttps://blogs.yahoo.co.jp/dk521123/37675977.html
アイコンを重ねる
<div>スイッチアイコンの禁止ボタン表示</div> <span class="fa-stack fa-lg"> <i class="fa fa-power-off fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger" style="color: tomato;"></i> </span>
■ サンプル
* 公式サイトのサンプルが役立つかと。http://fortawesome.github.io/Font-Awesome/examples/
[例1] アイコン表示のみ (Hello World的に)
例1-1 : URLを指定した場合* これだけ？すげー簡単!
<html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> </head> <body> <div>Sample1:×アイコンの表示</div> <i class="fa fa-times"></i> </body> </html>例1-2 : ダウンロードして設定した場合
<html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./font-awesome-4.4.0/css/font-awesome.min.css"> </head> <body> <div>Sample1:×アイコンの表示</div> <i class="fa fa-times"></i> </body> </html>
[例2] アイコン+α
* 色が付けられて非常にいい* 下記のサンプルを応用して、ボタンを作成した。詳細は以下の関連記事を参照のこと
https://blogs.yahoo.co.jp/dk521123/35497857.html (スイッチボタン)
https://blogs.yahoo.co.jp/dk521123/37663778.html (マテリアルデザインの丸ボタン)
<html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> </head> <body> <div>Sample3-1:大きさを変更</div> <br /> <i class="fa fa-power-off fa-lg"></i> 小<br /> <i class="fa fa-power-off fa-2x"></i><br /> <i class="fa fa-power-off fa-3x"></i><br /> <i class="fa fa-power-off fa-4x"></i><br /> <i class="fa fa-power-off fa-5x"></i> 大<br /> <br /><br /> <div>Sample3-2:丸ボタン</div> <br /> <div>Sample3-2-1:スイッチアイコンの丸ボタン表示(オレンジ色)</div> <span class="fa-stack fa-lg" style="color: orange;"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-power-off fa-stack-1x fa-inverse"></i> </span> <div>Sample3-2-2:スイッチアイコンの丸ボタン表示(グレー色)</div> <span class="fa-stack fa-lg" style="color: gray;"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-power-off fa-stack-1x fa-inverse"></i> </span> <div>Sample3-2-2:スイッチアイコンの禁止ボタン表示</div> <span class="fa-stack fa-lg"> <i class="fa fa-power-off fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger" style="color: tomato;"></i> </span> </body> </html>
[例3] Bootstrapと組み合わせる
* Bootstrapについては以下の関連記事を参照のこと。http://blogs.yahoo.co.jp/dk521123/28015251.html
http://blogs.yahoo.co.jp/dk521123/36125142.html
<html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <!-- jquery For Bootstrap.js --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!-- For Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> </head> <body>
[例4] Bootstrapと組み合わせる
<div>Sample3-1:ボタン</div> <br /> <div>Sample3-1-1:削除アイコン付きボタンの表示</div> <a class="btn btn-danger" href="#"> <i class="fa fa-trash-o fa-lg"></i> Delete</a> <div>Sample3-1-2:設定アイコン付きボタンの表示</div> <a class="btn btn-default" href="#"> <i class="fa fa-cog"></i> Settings</a> <br /><br /> <div>Sample3-2:入力ボックス</div> <br /> <div>Sample3-2-1:Emailアイコン付き入力ボックスの表示</div> <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>Sample3-2-1:パスワードアイコン付き入力ボックスの表示</div> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span> <input class="form-control" type="password" placeholder="Password"> </div> </body> </html>
[例5] placeholder内に使用する
「 font-weight: 900;」ってのが重要みたいだが、見栄えがいまいち...https://codepen.io/fontawesome/pen/deBxBp
https://stackoverflow.com/questions/50501417/font-awesome5-with-input-placeholder
参考文献
* 導入時に一読http://www.tailtension.com/bootstrap/1655/
https://saruwakakun.com/html-css/basic/font-awesome
http://locatimefree.com/icon-font-free-for-commercial-use/
* 色とか色々できるらしい
http://weboook.blog22.fc2.com/blog-entry-397.html
* 利点が書いてある。素晴らしい
http://allabout.co.jp/gm/gc/402551/
* with Bootstrap
http://kojikoji75.hatenablog.com/entry/2013/09/07/164748
関連記事
アイコン を アニメーション表示する ～ Font Awesome Animation ～
https://blogs.yahoo.co.jp/dk521123/37675977.htmlBootstrap 4 ～ 入門編 ～
https://blogs.yahoo.co.jp/dk521123/28015251.htmlBootstrap 4 ～ ボタン / アイコン 編 ～
https://blogs.yahoo.co.jp/dk521123/36125142.htm表示 / 非表示の切り替え
* 使用した例https://blogs.yahoo.co.jp/dk521123/35497857.html
